Angular 6在表单数组中动态创建的表单控件中的自定义验证

Angular 6中的表单数组允许你在表单中动态添加或删除表单控件。当你需要在这些动态创建的表单控件中实现自定义验证时，可以通过创建自定义验证器来实现。

基础概念

自定义验证器是一个函数，它接收一个AbstractControl对象并返回一个验证结果对象或null。如果返回一个对象，表示验证失败；如果返回null，表示验证通过。

类型

自定义验证器可以是同步的或异步的：

同步验证器：立即返回验证结果。
异步验证器：通常用于需要与服务器交互的验证，返回一个Observable或Promise。

应用场景

唯一性验证：确保表单中的某个字段值在整个集合中是唯一的。
复杂模式匹配：使用正则表达式或其他逻辑进行复杂的输入验证。
异步数据验证：例如检查用户名是否已被占用。

示例代码

假设我们要在一个动态表单数组中验证每个输入框的值是否为正整数。

同步自定义验证器

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

export function positiveIntegerValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    const value = control.value;
    if (value === null || value === undefined || value === '') {
      return null; // 或者根据需求返回错误信息
    }
    const isPositiveInteger = /^[1-9]\d*$/.test(value);
    return isPositiveInteger ? null : { 'positiveInteger': true };
  };
}

在组件中使用自定义验证器

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { positiveIntegerValidator } from './positive-integer.validator';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
})
export class DynamicFormComponent {
  dynamicForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.dynamicForm = this.fb.group({
      items: this.fb.array([])
    });
  }

  get items() {
    return this.dynamicForm.get('items') as FormArray;
  }

  addItem() {
    const itemGroup = this.fb.group({
      value: ['', [Validators.required, positiveIntegerValidator()]]
    });
    this.items.push(itemGroup);
  }

  onSubmit() {
    if (this.dynamicForm.valid) {
      console.log(this.dynamicForm.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

模板示例

<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
  <div formArrayName="items">
    <div *ngFor="let item of items.controls; let i = index" [formGroupName]="i">
      <input formControlName="value" placeholder="Enter a positive integer">
      <div *ngIf="item.get('value').errors?.positiveInteger">
        Value must be a positive integer.
      </div>
    </div>
  </div>
  <button type="button" (click)="addItem()">Add Item</button>
  <button type="submit">Submit</button>
</form>