angular - 控制更改的角度反应表单集验证器

问题描述

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

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

我已经尝试将validators订阅设置为外部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],
     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;
 }

标签： angularvalidationangular-reactive-forms

angular - 控制更改的角度反应表单集验证器

问题描述

解决方案

推荐阅读