在表单组上设置验证器

Question

我查看了多个问题，所有答案都是关于在表单组上设置验证器的。我知道如何使用如下所示的表单生成器。

 this.userForm = this.fb.group({
  id: '',
  firstName: ['', [Validators.required]],
  lastName: ['', [Validators.required]],
  email: ['', [Validators.required]],
  phoneNumber: ['', [Validators.required]],
  jobTitle: ['', [Validators.required]],
  team: ['', [Validators.required]],
  passwords: this.fb.group({
    password: '',
    confirmPassword: ''
  },{
    validator: Validators.compose([PasswordValidators.MatchPassword, PasswordValidators.PasswordRequirements])
  }),
  userValues: this.fb.array([])
});

现在我的组件有两种模式，添加和编辑。如果模式是添加，那么密码控件应该使用所需的验证器。我检查模式，如果它不处于编辑模式，我想更新密码表单组上的验证器以包括所需的验证器。我已经在 ngInit 事件中尝试过，如下所示。

 // if not edit mode then the password fields are required, so we overwrite the default validators.
if(!this.isEditMode)
{
  console.log("user form mode: " + this.isEditMode)
  const passwordForm = <FormGroup>this.userForm.controls['passwords'];

   // try to set the validators on the form group as a whole.
  passwordForm.setValidators([PasswordValidators.MatchPassword, PasswordValidators.PasswordRequirements, Validators.required]);
  // try to set the password on the individual control.
  passwordForm.controls['password'].setValidators([PasswordValidators.MatchPassword, PasswordValidators.PasswordRequirements, Validators.required]);

}

现在第一次尝试更新表单组中的验证器时没有任何区别。我们更新单个表单控件的第二次尝试导致我的验证器抛出异常。那么我是否可以将它应用于表单组而不必更改我的验证器的工作方式。验证器如下所示。

import { AbstractControl, ValidatorFn } from '@angular/forms';

export class PasswordValidators {

    static MatchPassword(AC: AbstractControl){
        let password = AC.get('password').value; // to get value in input tag
        let confirmPassword = AC.get('confirmPassword').value; // to get value in input tag

         if(!password || password == "")
         {
             return null;
         }

         if(password != confirmPassword) {
             AC.get('confirmPassword').setErrors( {MatchPassword: true} );
         } else {
             return null;
         }
    }

    // Ensures the password meets the minimum standard. Password should be at least 8 char, contain one numeric, one character, and one special character.
    static PasswordRequirements(AC: AbstractControl) {
        let password = AC.get('password').value;

        if(!password || password == "")
        {
            return null;
        }

        if(password != password.match("^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$")) {
            AC.get('password').setErrors({PasswordRequirements: true})
        } else {
            return null;
        }

    }
}

任何关于我如何实现这一目标的建议都很棒。干杯。

Answer 1

为了解决这个问题，因为我知道我的表单处于什么状态，我实际上只有两个不同的表单定义，如他评论中提到的 JB Nizet。

它感觉不像是最干净的解决方案，但对于这个用例它有效。

if(!this.isEditMode) {
  this.userForm = this.fb.group({
    id: '',
    firstName: ['', [Validators.required]],
    lastName: ['', [Validators.required]],
    email: ['', [Validators.required]],
    phoneNumber: ['', [Validators.required]],
    jobTitle: ['', [Validators.required]],
    team: ['', [Validators.required]],
    passwords: this.fb.group({
      password:  ['', Validators.required],
      confirmPassword:  ['', Validators.required]
    },{
      validator: Validators.compose([PasswordValidators.MatchPassword, PasswordValidators.PasswordRequirements])
    }),
    userValues: this.fb.array([]),
    roles: []
  });
} else { 
  this.userForm = this.fb.group({
    id: '',
    firstName: ['', [Validators.required]],
    lastName: ['', [Validators.required]],
    email: ['', [Validators.required]],
    phoneNumber: ['', [Validators.required]],
    jobTitle: ['', [Validators.required]],
    team: ['', [Validators.required]],
    passwords: this.fb.group({
      password: '',
      confirmPassword: ''
    },{
      validator: Validators.compose([PasswordValidators.MatchPassword, PasswordValidators.PasswordRequirements])
    }),
    userValues: this.fb.array([]),
    roles: []
  });
}

在表单组上设置验证器

Setting validators on formgroup

validation

typescript

angular-components

angular

angular-reactive-forms