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

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>