Angular 基于控件更改的角度反应式表单集验证器

我有一个反应式表单，当我更改密码值时，我想更改密码并确认密码

验证器

。我订阅密码控制

valueChanges

，并在控制值更改时设置

验证程序。为了避免只重复一次操作，我在设置
验证程序后取消了订阅

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

我已尝试将
验证器设置在订阅之外的
值更改
，它工作正常

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

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

表格代码：

         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();
    }
)

this.form=this.fb.group({
usuario:[this.data.usuario，[Validators.required]]，
密码：[this.data.password，[Validators.required，Validators.minLength（6）]，
确认密码：[{value:''，已禁用：true}]，
nombre:[this.data.nombre，[Validators.required]]，
apellido:[this.data.apellido，[Validators.required]]，
inicial:[this.data.inicial，[Validators.required]]，
电子邮件：[this.data.email，[Validators.required，Validators.email]]，
habilitado:[this.data.habilitado.value]，
imagenPerfil:[this.data.imagenPerfil，null]，
modoNuevoPerfil:[假]，
modoEditarPerfil:[错误]，
permisos:this.fb.group({
名称：[''，空]，
usuarios:this.fb.group({
阿尔塔：[错]，
巴哈：[错]，
修改：[false]，
可视化：[错误]
}),
usuariosPerfiles:this.fb.group({
阿尔塔：[错]，
巴哈：[错]，
修改：[false]，
可视化：[错误]
}),
configuracionesTecnicas:this.fb.group({
阿尔塔：[错]，
巴哈：[错]，
修改：[false]，
可视化：[错误]
}),
卓加斯：这个团体({
阿尔塔：[错]，
巴哈：[错]，
修改：[false]，
可视化：[错误]
}),
drogasCertificados:this.fb.group({
阿尔塔：[错]，
巴哈：[错]，
可视化：[错误]
}),
drogasrestreeos:this.fb.group({
阿尔塔：[错]，
巴哈：[错]，
修改：[false]，
Aprobarechazar:[假]，
可视化：[错误]
}),
drogasmovimentos:this.fb.group({
阿尔塔：[错]，
巴哈：[错]，
修改：[false]，
可视化：[错误]
}),
soluciones:this.fb.group({
阿尔塔：[错]，
巴哈：[错]，
修改：[false]，
Aprobarechazar:[假]，
可视化：[错误]
}),
设备附件：this.fb.group({
阿尔塔：[错]，
巴哈：[错]，
修改：[false]，
可视化：[错误]
}),
equiposAuxiliaresCertificados:this.fb.group({
阿尔塔：[错]，
巴哈：[错]，
修改：[false]，
可视化：[错误]
}),
materialVolumetrico:this.fb.group({
阿尔塔：[错]，
巴哈：[错]，
修改：[false]，
可视化：[错误]
}),
材料体积认证：this.fb.group({
阿尔塔：[错]，
巴哈：[错]，
修改：[false]，
可视化：[错误]
}),
})
});

值更改订阅代码：

         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();
    }
)

this.passwordChange$=this.form.controls.usuario.valueChanges.subscribe(
() => {
this.form.setValidators（this.passwordconcurren（'password'，'confirmarPassword'））；
this.form.controls.confirmarPassword.enable（）
this.form.controls.confirmarPassword.setValidators（[Validators.required]）；
this.form.updateValueAndValidity（）的
此.passwordChange$.unsubscribe（）文件
}
)

检查错误代码的功能：

         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();
    }
)

函数findInvalidControls（）{
常量无效=[]；
const controls=this.form.controls；
for（控件中的常量名称）{
if（控件[名称]。无效）{
无效。推送（名称）；
}
}
返回无效；
}
我写了一篇关于RF和自定义验证器函数的文章，你可以找到一些例子

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

在初始化表单时设置我的cumstom验证程序，但保持禁用我的
confirmarPassword
以便不检查验证

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

正如我所说的，我不知道为什么，但是如果您将表单验证器设置在formControl valueChanges observable中，那么表单验证器将无法按预期工作

表格代码：

         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();
    }
)

值更改订阅代码：

         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();
    }
)

更新日期：2020年9月7日

我发现问题出在我的自定义验证器中，我错误地使用了验证器fn interbase，因为当没有错误而不是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
  } 
}

}以下是一个工作示例

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

updateValue和validity中的选项<