如何为Angular中FormArray内部的表单控件设置验证器

问题原因 #

仅FormArray初始化时创建的第一个控件配置了必填验证，后续addItem新增的FormControl未绑定验证规则，因此不会触发空值校验。同时你初始化FormControl时传入['']属于语法冗余，默认值直接传入空字符串即可。

修复方案 #

1. 简化初始化逻辑+抽离公共控件创建方法（推荐）

将表单项的创建逻辑抽为公共方法，初始化和新增时统一调用，后续修改验证规则只需调整一处即可：

import { Validators, FormControl } from '@angular/forms'; // 确保已导入依赖

@Input() defaultOption: string = '';
@Input() optionsList: Array<string> = [];
@Output() optionSelected = new EventEmitter<string>();

selected: string = '';
constructor(private fb: FormBuilder) {}

// 抽离公共方法，统一管控项的验证规则
private createItemControl(): FormControl {
  return this.fb.control('', Validators.required);
}

itemsForm = this.fb.group({
  array: this.fb.array([this.createItemControl()]),
});

get itemsArray(){
  return this.itemsForm.get('array') as FormArray
}

ngOnInit(): void {}

updateSelection() {
  this.optionSelected.emit(this.selected);
}

addItem() {
  // 新增时调用公共方法，自动带上验证规则
  this.itemsArray.push(this.createItemControl());
}

2. 可选：补充HTML错误提示

你已配置了非法状态的样式类，可以补充对应错误提示提升体验：

<input
  type="text"
  [formControlName]="index"
  class="form-control"
  [ngClass]="{
    'is-invalid': item.touched  && !item.valid
  }"
/>
<!-- 新增必填错误提示 -->
<div *ngIf="item.touched && item.hasError('required')" class="invalid-feedback">
  此项为必填项
</div>

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