在表单组上设置验证器

Posted 2023-03-13

【中文标题】在表单组上设置验证器

【英文标题】：Setting validators on formgroup

【发布时间】：2018-06-29 16:26:15

【问题描述】：

我查看了多个问题，所有答案都用于。我知道如何使用如下所示的表单生成器。

 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;
        

    

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

【问题讨论】：

您正在混合验证整个组的验证器（MatchPassword、PasswordRequirements），因此需要在组上设置，以及验证单个控件的验证器（Validators.required，它检查输入值不是 null 或空），因此必须在控件上设置。还不清楚为什么您没有从一开始就设置正确的验证器：您在创建表单组时已经知道组件的模式，不是吗？

是的，我确实知道模式，但为了减少代码量，我不想有两个单独的表单定义。尽管现在听起来更容易使用该选项。感谢您对验证器的解释，过去几周我只使用 Angular，所以我还有很多东西要学。

【参考方案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: []
  );