如何为Angular 2的FormArray实现长度与正则表达式验证

嘿，我来帮你搞定Angular 2里FormArray的长度和正则验证问题，结合你给出的现有代码一步步说明~

一、FormArray的长度验证（最少/最多元素数） #

要限制FormArray的元素数量（比如至少1个、最多5个），我们直接给FormArray本身添加minLength和maxLength验证器就行，不用给单个控件加。

修改组件代码 #

你原来的Form初始化可以改成这样，直接给topics这个FormArray添加验证规则：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, FormArray, FormBuilder, Validators } from '@angular/forms';

@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
 name = 'Angular 6';
 form: FormGroup;

 constructor(private fb: FormBuilder) {}

 ngOnInit() {
   // 用FormBuilder更简洁，也可以直接用new FormGroup的方式
   this.form = this.fb.group({
     topics: this.fb.array([], [
       Validators.minLength(1), // 最少需要1个主题
       Validators.maxLength(5)  // 最多只能加5个主题
     ])
   });
 }

 addTopic(topic: HTMLInputElement){
   (this.form.get('topics') as FormArray).push(new FormControl(topic.value));
   topic.value='';
 }
}

模板中显示错误提示 #

在模板里可以根据FormArray的验证状态显示错误：

<!-- 长度不足的错误提示 -->
<div *ngIf="form.get('topics').hasError('minlength')" style="color: red;">
  至少需要添加1个主题哦
</div>
<!-- 数量超限的错误提示 -->
<div *ngIf="form.get('topics').hasError('maxlength')" style="color: red;">
  最多只能添加5个主题啦
</div>

二、正则表达式验证（两种常见场景） #

正则验证分两种情况：一种是每个新增的输入框都要符合正则，另一种是整个FormArray里至少有一个元素符合正则，我分别给你讲：

场景1：每个输入控件都符合正则 #

修改addTopic方法，在创建FormControl时就加上正则验证规则：

addTopic(topic: HTMLInputElement){
  // 给每个新添加的控件加正则验证（示例：3-15位字母、数字、下划线或短横线）
  const topicControl = new FormControl(topic.value, [
    Validators.required,
    Validators.pattern(/^[a-zA-Z0-9_-]{3,15}$/)
  ]);
  (this.form.get('topics') as FormArray).push(topicControl);
  topic.value='';
}

然后在模板里针对每个控件显示错误：

<div *ngFor="let topicCtrl of form.get('topics').controls; let i=index">
  <input [formControl]="topicCtrl" placeholder="输入主题">
  <!-- 单个控件的正则错误提示 -->
  <div *ngIf="topicCtrl.hasError('pattern')" style="color: red;">
    第{{i+1}}个主题格式不对，需要是3-15位的字母、数字、下划线或短横线
  </div>
</div>

场景2：整个FormArray至少有一个元素符合正则 #

如果需要确保FormArray里至少有一个元素满足正则，我们可以写一个自定义验证器：

// 自定义验证器：检查FormArray中是否至少有一个元素匹配指定正则
function atLeastOneMatchesPattern(pattern: RegExp): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const formArray = control as FormArray;
    // 遍历所有控件，判断是否有符合正则的
    const hasMatch = formArray.controls.some(ctrl => 
      ctrl.value && pattern.test(ctrl.value)
    );
    // 有匹配返回null（验证通过），否则返回错误对象
    return hasMatch ? null : { noMatchingPattern: true };
  };
}

然后把这个自定义验证器加到FormArray上：

ngOnInit() {
  this.form = this.fb.group({
    topics: this.fb.array([], [
      Validators.minLength(1),
      // 加入自定义正则验证器
      atLeastOneMatchesPattern(/^[a-zA-Z0-9_-]{3,15}$/)
    ])
  });
}

最后在模板里显示这个全局错误：

<div *ngIf="form.get('topics').hasError('noMatchingPattern')" style="color: red;">
  至少需要有一个主题符合格式要求哦
</div>

别忘了在顶部导入自定义验证器需要的类型：

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

内容的提问来源于stack exchange，提问作者Mithun S