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

Angular 6允许我们动态创建表单控件，包括自定义验证。在表单数组中动态创建的表单控件中的自定义验证，可以通过以下步骤实现：

首先，在Angular项目中引入表单模块，以及需要使用的其他相关模块。在组件的NgModule装饰器中导入FormsModule和ReactiveFormsModule。

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule
  ],
  // 其他配置项
})
export class YourModule { }

在组件的类中创建表单控件所需的数据结构，并初始化表单控件。

import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: 'your-component.component.html',
  styleUrls: ['your-component.component.css']
})
export class YourComponent implements OnInit {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      // 创建表单控件和验证规则
      controlsArray: this.formBuilder.array([])
    });
  }

  // 添加新的表单控件
  addControl() {
    const controlArray = this.form.get('controlsArray') as FormArray;
    controlArray.push(this.formBuilder.control('', Validators.required));
  }

  // 移除表单控件
  removeControl(index: number) {
    const controlArray = this.form.get('controlsArray') as FormArray;
    controlArray.removeAt(index);
  }

  // 自定义验证规则
  customValidator(control: AbstractControl): ValidationErrors | null {
    // 自定义验证逻辑
  }
}

在模板中绑定表单控件和自定义验证。

<form [formGroup]="form">
  <div formArrayName="controlsArray">
    <div *ngFor="let control of form.get('controlsArray').controls; let i = index">
      <input type="text" [formControlName]="i" />
      <!-- 显示自定义错误信息 -->
      <div *ngIf="form.get('controlsArray').controls[i].hasError('custom')">
        Custom validation error message.
      </div>
    </div>
  </div>
</form>
<button (click)="addControl()">Add Control</button>
<button (click)="removeControl(i)">Remove Control</button>

在组件类中注册自定义验证规则。

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

// ...

class YourComponent implements OnInit {
  // ...

  ngOnInit() {
    // ...
    // 注册自定义验证规则
    this.form.get('controlsArray').setValidators(this.customValidator);
  }

  customValidator(control: AbstractControl): ValidationErrors | null {
    // 自定义验证逻辑
  }
}

通过以上步骤，我们可以实现在Angular 6中动态创建表单控件并添加自定义验证。在这个例子中，我们创建了一个表单控件数组controlsArray，并提供了添加和移除控件的方法。同时，我们还通过customValidator方法实现了自定义验证逻辑。在模板中，我们使用*ngFor指令迭代表单控件，并使用formControlName指令将控件绑定到相应的索引。如果控件验证失败，我们可以显示自定义的错误信息。

这里推荐腾讯云的相关产品：腾讯云云服务器、腾讯云数据库 MySQL 版等。