Angular响应式表单中如何依据动态FormArray多控件空值状态禁用按钮

问题原因 #

你之前的写法不生效是因为 justificationItems 是 FormArray 类型，它的 controls 属性是所有表单项的 FormGroup 集合，属于数组类型，不能直接访问 description 属性，需要先定位到要校验的数组项（通常是最后一项），再读取对应控件的有效值状态。

实现方案 #

前置要求

首先要保证你创建每个子 FormGroup 时，给三个字段都加上必填校验，否则空值也会被判定为有效：

import { Validators } from '@angular/forms';

// 封装创建单个表单项的方法
createJustificationItem(): FormGroup {
  return this.fb.group({
    name: ['', Validators.required],
    description: ['', Validators.required],
    code: ['', Validators.required]
  })
}

方案1：模板直接写判断逻辑

直接修改按钮的 disabled 绑定逻辑即可，兼容数组为空的场景（允许添加第一个项）：

<button 
  [disabled]="form.get('justificationItems')?.length && 
    !(form.get('justificationItems')?.last?.get('name')?.valid &&
      form.get('justificationItems')?.last?.get('description')?.valid &&
      form.get('justificationItems')?.last?.get('code')?.valid)" 
  type="button" 
  (click)="addItem()"
>
  Add Item
</button>

方案2：组件类封装 getter（更推荐）

把校验逻辑放到组件类中封装，模板代码更简洁，也方便后续迭代修改规则：

1. 组件类ts中添加 getter：

get isAddBtnDisabled(): boolean {
  const itemArray = this.form.get('justificationItems') as FormArray;
  // 数组为空时允许添加第一个项
  if (!itemArray.length) return false;
  // 校验最后一个项的所有必填字段
  const lastItem = itemArray.last as FormGroup;
  return !(lastItem.get('name')?.valid && lastItem.get('description')?.valid && lastItem.get('code')?.valid);
}

2. 模板直接绑定：

<button [disabled]="isAddBtnDisabled" type="button" (click)="addItem()">Add Item</button>

拓展说明 #

如果你的需求是要求 FormArray 中所有历史项都校验通过才能新增，只需要把上述逻辑中取last的部分替换为遍历所有数组项校验即可。

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