Angular中表单数组为空时如何禁用提交按钮？

要实现FormArray为空时禁用提交按钮、表单必须至少包含一项才能提交的需求，你可以通过自定义表单验证器结合表单状态绑定来完成，具体步骤如下：

1. 编写自定义验证器函数 #

Angular没有内置的FormArray非空验证器，我们需要自己实现一个，用来检查数组是否至少包含一项：

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

export function atLeastOneItemValidator(): ValidatorFn {
  return (control: FormArray) => {
    // 数组长度大于0则验证通过，否则返回错误标记
    return control.length > 0 ? null : { emptyArray: true };
  };
}

2. 在表单中应用验证器 #

创建表单时，将这个验证器绑定到你的FormArray上，确保数组为空时表单整体处于无效状态：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
import { atLeastOneItemValidator } from './validators/at-least-one-item.validator'; // 导入验证器

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent {
  myForm: FormGroup;

  // 快捷获取FormArray控件
  get items(): FormArray {
    return this.myForm.get('items') as FormArray;
  }

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      // 其他表单控件示例
      name: ['', Validators.required],
      // 给FormArray绑定自定义验证器
      items: this.fb.array([], atLeastOneItemValidator())
    });
  }

  // 添加数组项
  addItem(): void {
    const itemGroup = this.fb.group({
      itemName: ['', Validators.required],
      quantity: [1, Validators.min(1)]
    });
    this.items.push(itemGroup);
    // 手动触发表单验证，确保状态及时更新
    this.myForm.updateValueAndValidity({ emitEvent: true });
  }

  // 删除数组项
  removeItem(index: number): void {
    this.items.removeAt(index);
    this.myForm.updateValueAndValidity({ emitEvent: true });
  }

  // 表单提交逻辑
  onSubmit(): void {
    if (this.myForm.valid) {
      console.log('提交数据:', this.myForm.value);
      // 在这里执行实际的提交操作
    }
  }
}

3. 模板中绑定按钮状态与错误提示 #

在模板里，通过表单的invalid状态控制提交按钮的禁用状态，同时可以显示数组为空的错误提示：

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <!-- 其他表单控件示例 -->
  <div class="form-group">
    <label>表单名称:</label>
    <input formControlName="name" type="text" class="form-control">
    <div *ngIf="myForm.get('name')?.invalid && myForm.get('name')?.touched" class="text-danger">
      表单名称为必填项
    </div>
  </div>

  <!-- FormArray 区域 -->
  <div formArrayName="items" class="mt-3">
    <h4>项目列表</h4>
    <button type="button" class="btn btn-sm btn-primary" (click)="addItem()">添加项目</button>

    <!-- 循环渲染数组项 -->
    <div *ngFor="let item of items.controls; let i = index" [formGroupName]="i" class="mt-2 p-2 border">
      <div class="form-group">
        <label>项目名称:</label>
        <input formControlName="itemName" type="text" class="form-control">
        <div *ngIf="item.get('itemName')?.invalid && item.get('itemName')?.touched" class="text-danger">
          项目名称为必填项
        </div>
      </div>
      <div class="form-group">
        <label>数量:</label>
        <input formControlName="quantity" type="number" class="form-control">
        <div *ngIf="item.get('quantity')?.invalid && item.get('quantity')?.touched" class="text-danger">
          数量至少为1
        </div>
      </div>
      <button type="button" class="btn btn-sm btn-danger" (click)="removeItem(i)">删除</button>
    </div>

    <!-- 数组为空的错误提示 -->
    <div *ngIf="items.hasError('emptyArray') && items.touched" class="text-danger mt-2">
      至少需要添加一个项目才能提交
    </div>
  </div>

  <!-- 提交按钮：表单无效时禁用 -->
  <button type="submit" class="btn btn-primary mt-3" [disabled]="myForm.invalid">提交</button>
</form>

关键说明 #

• 验证器直接作用于FormArray，当数组长度为0时，会给FormArray添加emptyArray错误，导致整个表单处于invalid状态
• 提交按钮通过[disabled]="myForm.invalid"绑定状态，确保任何验证失败（包括数组为空）时按钮都被禁用
• 增减数组项后调用updateValueAndValidity，可以确保表单状态及时更新，避免出现状态不同步的问题

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