Angular 如何设置窗体控件的多重验证？

我有一个带有one输入的简单表单。我想在此输入中设置多重验证。我可以像下面这样设置一个验证，但我想设置多个验证。请帮帮我 这是我的Html代码：

   <form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
       <div class="input-holder">
          <input type="text" maxlength="11" inputmode="numeric" digitOnly formControlName="phoneNumber" />
          <input type="submit" value="دریافت لینک دانلود" [disabled]="!contactForm.valid">
       </div>
   </form>

我想设置

Validators.minLength(11)

和

Validators.maxLength(11)

---

和…

因为FormControl ValidatorOpts是数组，所以可以像这样设置多个验证

constructor() {
    this.contactForm = new FormGroup({
      phoneNumber: new FormControl("", [Validators.required, Validators.minLength(11)])
    });
  }

或使用

将多个验证器组合成一个函数，该函数返回 所提供控件的单个错误映射的并集

---

您可以在下面找到完整的工作示例

我想，答案已经被接受，并且有了有效的解决方案。我必须给出一个稳健的解决方案，用于多次应用自定义验证。。起初感觉很长，但在应用程序扩展和可重用性的长期运行中，您可以多次重复使用自己的自定义验证器功能

例如，如果您有密码字段，并且希望使该密码字段像密码一样进行验证，则必须进行以下验证

• 必需的
• 至少允许使用一个小写字母
• 至少允许一个大写字母
• 至少允许一个数字字母
• 至少允许一个特殊字符
• 至少允许有八个字母

因此，在angular中进行这种类型的多重验证时，我们将使用一个自定义验证函数指令，以获得更好的角度支持。创建新文件

自定义验证器.指令

，然后在此文件中放入此代码

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

export function customValidation(): ValidatorFn{
      return (control: AbstractControl) : {[key:string]: boolean} | null =>{
             const errorObject = {};

             const SMALL_LETTER_REGEXP = /^(?=.*[a-z])/;
             const UPPER_LETTER_REGEXP = /^(?=.*[A-Z])/;
             const NUMERIC_REGEXP = /^(?=.*[0-9])/;
             const SPECIAL_CHAR_REGEXP = /^(?=.*\W)/;
             const AT_LEAST_EIGHT_REGEXP = /^(?=.{8,})/

             if (SMALL_LETTER_REGEXP.test(control.value)){
             }else {
                 errorObject['atLeastOneSmallLetter'] = true;
              }
             if (UPPER_LETTER_REGEXP.test(control.value)){
             }else {
                errorObject['atLeastOneUpperLetter'] = true;
              }
            if(NUMERIC_REGEXP.test(control.value)){
            }else {
                errorObject['atLeastOneNumeric'] = true;
            }
            if(SPECIAL_CHAR_REGEXP.test(control.value)){
            }else {
                errorObject['atLeastOneSpecialChar'] = true;
            }
            if(AT_LEAST_EIGHT_REGEXP.test(control.value)){
            }else {
                errorObject['atLeastOneEightLength'] = true;
            }
         return errorObject;
      };
}

现在在component.ts中导入此文件，其中有

formsGroup

和

FormsBuilder

import {customValidation} from './custom-validator.directive';

export class AppComponent  {
    formGroup: FormGroup;
    constructor(private fb: FormBuilder){}
    ngOnInit(){
        this.formGroup = this.fb.group({
                             password: ['', [ Validators.required,  customValidation()]]
            })
    }
    get password(){
        return this.formGroup.get('password');
    }
}

在这一行的上面代码中，

password:[''[Validators.required，customValidation（）]

，我们正在将

customValidation（）

函数传递到

formGroup

中。这样，我们将在此

密码
表单控件中应用所有验证

因此，每个输入密钥字段都会发生更改，我们将异步检查所有密码规则验证。并告诉用户只输入与字符串匹配的有效密码

您的模板.HTML是

<form [formGroup]="formGroup">
     <div  class="form-group col-md-6">
         <label for="password">Enter Pass-Word</label>
         <input id="password" class="form-control" placeholder="Password" type="password" formControlName="password" >

     </div>

     <div class="col-md-6 " *ngIf="password.invalid && (password.dirty || password.touched)">
         <div class="alert alert-danger " *ngIf="password.hasError('required')">
            <ul> <li> Required  </li> </ul>
         </div>
         <div class="alert alert-danger" *ngIf="password.hasError('atLeastOneSmallLetter')">
            <ul> <li> At least one SMALL letter is allowed  </li> </ul> 
         </div>
         <div class="alert alert-danger" *ngIf="password.hasError('atLeastOneUpperLetter')">
            <ul> <li> At least one UPPER letter is allowed  </li> </ul>
         </div>
         <div class="alert alert-danger" *ngIf="password.hasError('atLeastOneNumeric')">
            <ul> <li> At least one NUMERIC letter is allowed  </li> </ul>
         </div>
         <div class="alert alert-danger" *ngIf="password.hasError('atLeastOneSpecialChar')">
            <ul> <li> At least one SPECIAL-CHARACTER is allowed  </li> </ul>
         </div>
         <div class="alert alert-danger" *ngIf="password.hasError('atLeastOneEightLength')">
            <ul> <li> At least Eight Letter is allowed  </li> </ul>
         </div>
     </div>
</form>


输入密码
要求

至少允许一个小写字母

至少允许一个大写字母
至少允许一个数字字母
至少允许一个特殊字符
至少允许八个字母
您可以这样设置它
[Validators.required，Validators.minLength（11），Validators.maxLength（11）]
在数组中。
import {customValidation} from './custom-validator.directive';

export class AppComponent  {
    formGroup: FormGroup;
    constructor(private fb: FormBuilder){}
    ngOnInit(){
        this.formGroup = this.fb.group({
                             password: ['', [ Validators.required,  customValidation()]]
            })
    }
    get password(){
        return this.formGroup.get('password');
    }
}

<form [formGroup]="formGroup">
     <div  class="form-group col-md-6">
         <label for="password">Enter Pass-Word</label>
         <input id="password" class="form-control" placeholder="Password" type="password" formControlName="password" >

     </div>

     <div class="col-md-6 " *ngIf="password.invalid && (password.dirty || password.touched)">
         <div class="alert alert-danger " *ngIf="password.hasError('required')">
            <ul> <li> Required  </li> </ul>
         </div>
         <div class="alert alert-danger" *ngIf="password.hasError('atLeastOneSmallLetter')">
            <ul> <li> At least one SMALL letter is allowed  </li> </ul> 
         </div>
         <div class="alert alert-danger" *ngIf="password.hasError('atLeastOneUpperLetter')">
            <ul> <li> At least one UPPER letter is allowed  </li> </ul>
         </div>
         <div class="alert alert-danger" *ngIf="password.hasError('atLeastOneNumeric')">
            <ul> <li> At least one NUMERIC letter is allowed  </li> </ul>
         </div>
         <div class="alert alert-danger" *ngIf="password.hasError('atLeastOneSpecialChar')">
            <ul> <li> At least one SPECIAL-CHARACTER is allowed  </li> </ul>
         </div>
         <div class="alert alert-danger" *ngIf="password.hasError('atLeastOneEightLength')">
            <ul> <li> At least Eight Letter is allowed  </li> </ul>
         </div>
     </div>
</form>