控制变更的角度反应式表单集验证器

Question

我有一个被动表单，当我更改密码值时，我想更改密码和确认密码validators。我正在订阅密码控制valueChanges，并在控制值更改时设置validators。为了避免只重复一次操作，我在设置validators后取消了订阅。

问题是验证器设置正确，但一旦所有字段都完成，尽管表单中没有错误，但它被标记为invalid。

我已经尝试在订阅valueChanges之外设置validators，它工作正常。

我尝试使用一个函数来返回有错误的控件，但当我按预期完成所有字段时，没有返回任何错误。

我不知道为什么它不能正常工作。

表单代码：

this.form = this.fb.group({
usuario: [this.data.usuario, [Validators.required]],
password: [this.data.password, [Validators.required, Validators.minLength(6)]],
confirmarPassword: [{ value: '', disabled: true }],
nombre: [this.data.nombre, [Validators.required]],
apellido: [this.data.apellido, [Validators.required]],
inicial: [this.data.inicial, [Validators.required]],
email: [this.data.email, [Validators.required, Validators.email]],
habilitado: [this.data.habilitado.value],
imagenPerfil: [this.data.imagenPerfil, null],
modoNuevoPerfil: [false],
modoEditarPerfil: [false],
permisos: this.fb.group({
nombre: ['', null],
usuarios: this.fb.group({
alta: [false],
baja: [false],
modificacion: [false],
visualizacion: [false]
}),
usuariosPerfiles: this.fb.group({
alta: [false],
baja: [false],
modificacion: [false],
visualizacion: [false]
}),
configuracionesTecnicas: this.fb.group({
alta: [false],
baja: [false],
modificacion: [false],
visualizacion: [false]
}),
drogas: this.fb.group({
alta: [false],
baja: [false],
modificacion: [false],
visualizacion: [false]
}),
drogasCertificados: this.fb.group({
alta: [false],
baja: [false],
visualizacion: [false]
}),
drogasRetesteos: this.fb.group({
alta: [false],
baja: [false],
modificacion: [false],
aprobarRechazar: [false],
visualizacion: [false]
}),
drogasMovimientos: this.fb.group({
alta: [false],
baja: [false],
modificacion: [false],
visualizacion: [false]
}),
soluciones: this.fb.group({
alta: [false],
baja: [false],
modificacion: [false],
aprobarRechazar: [false],
visualizacion: [false]
}),
equiposAuxiliares: this.fb.group({
alta: [false],
baja: [false],
modificacion: [false],
visualizacion: [false]
}),
equiposAuxiliaresCertificados: this.fb.group({
alta: [false],
baja: [false],
modificacion: [false],
visualizacion: [false]
}),
materialVolumetrico: this.fb.group({
alta: [false],
baja: [false],
modificacion: [false],
visualizacion: [false]
}),
materialVolumetricoCertificados: this.fb.group({
alta: [false],
baja: [false],
modificacion: [false],
visualizacion: [false]
}),
})
});

价值更改订阅代码：

this.passwordChange$ = this.form.controls.usuario.valueChanges.subscribe(
() => {
this.form.setValidators(this.passwordCoinciden('password', 'confirmarPassword'));
this.form.controls.confirmarPassword.enable()
this.form.controls.confirmarPassword.setValidators([Validators.required]);
this.form.updateValueAndValidity()
this.passwordChange$.unsubscribe()
}
)

检查错误代码的功能：

function findInvalidControls() {
const invalid = [];
const controls = this.form.controls;
for (const name in controls) {
if (controls[name].invalid) {
invalid.push(name);
}
}
return invalid;
}

Answer 1

我写了一篇关于RF和自定义验证器功能的文章，你可以找到一些的例子

https://dev.to/salimchemes/reactiveforms-formarrays-and-custom-validators-1d0k

Answer 2

我已经找到了解决这个问题的方法，我不明白为什么它能起作用，为什么，但这仍然可以帮助一些人。

在初始化表单时设置我的cumstom验证器，但保持禁用confirmarPassword，这样就不会检查验证。

然后我订阅this.form.controls.password.valueChanges，当它改变时，我启用confirmarPassword

正如我所说，我不知道为什么，但如果你在formControl值中设置表单验证器，那么它们就不会像预期的那样工作。

表单代码：

this.form = this.fb.group({
usuario: [this.data.usuario, [Validators.required]],
password: [this.data.password, [Validators.required, Validators.minLength(6)]],
confirmarPassword: [{ value: '', disabled: true }],
nombre: [this.data.nombre, [Validators.required]],
apellido: [this.data.apellido, [Validators.required]],
inicial: [this.data.inicial, [Validators.required]],
email: [this.data.email, [Validators.required, Validators.email]],
habilitado: [this.data.habilitado.value],
imagenPerfil: [this.data.imagenPerfil, null],
modoNuevoPerfil: [false],
modoEditarPerfil: [false],
});
// Here I set the validator but it does not work until I enable 'confirmarPassword'
this.form.setValidators(this.passwordCoinciden('password', 'confirmarPassword'));

价值变更订阅代码：

this.passwordChange$ = this.form.controls.usuario.valueChanges.subscribe(
() => {
this.form.controls.confirmarPassword.setValidators([Validators.required]);
this.form.controls.confirmarPassword.enable()
this.form.updateValueAndValidity()
this.passwordChange$.unsubscribe();
}
)

更新日期9/2020

我发现问题出在我的自定义验证器中，我错误地使用了ValidatorFn接口，因为我在没有错误的情况下返回了一个空对象，而不是null。

修改的自定义验证码

passwordCoinciden(_password: string, _confirmarPassword: string) : ValidatorFn{
return (group: FormGroup): {[key: string]: any} => {
let password = group.controls[_password];
let confirmarPassword = group.controls[_confirmarPassword];
if (password.value && confirmarPassword.value && password.value != confirmarPassword.value ) {
this.form.controls[_confirmarPassword].markAllAsTouched()
this.form.controls[_confirmarPassword].setErrors({passNoCoinciden: "Los passwords no coinciden" })
return {passNoCoinciden: "Los passwords no coinciden" }

} else {
this.form.controls[_confirmarPassword].setErrors(null);
return  null
} 
}

}

Answer 3

这里是一个工作示例。

export class AppComponent implements OnInit {
loginForm: FormGroup = this.fb.group({
phonenumber: [""],
check: [false]
});
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.loginForm.get("check").valueChanges.subscribe(value => {
if (value) {
this.loginForm.get("phonenumber").setValidators([Validators.required]);
} else {
this.loginForm.get("phonenumber").clearValidators();
}
this.loginForm.get("phonenumber").updateValueAndValidity({ emitEvent : false });
console.log(this.loginForm.valid);
});
}
loginUser() {}
}

你可以在这里测试

对于那些错误地说"；MaxExecutionStack"请注意，这是因为

emitEvent : false

updateValueAndValidity方法内的选项！