Angular Reactive Forms数组：实现末尾日期控件可选可编辑需求

需求说明 #

• 表单包含多组开始/结束日期对，初始加载3组，支持新增、删除按钮
• 新增按钮仅在最后一个FormGroup验证通过时，才能添加新日期对
• 组件初始化时，第3组（最后一组）的结束日期FormControl需可编辑且移除required验证
• 添加第4组后，第3组结束日期设为不可编辑并添加required验证，第4组结束日期保持可编辑且可选
• 删除操作后保持逻辑一致：始终让最后一组的结束日期可选、可编辑

当前问题 #

末尾结束日期始终为必填且不可编辑，无法实现预期效果

现有代码 #

protected addDatePair() {
    const datesArray = this.datesInfo.get('datesArray') as FormArray;

    if (datesArray.length > 0) {
      const lastFormGroup = datesArray.at(datesArray.length - 1) as FormGroup;

      if (lastFormGroup && lastFormGroup.valid) {
        // add date to array in class
        this.datesArray.push(9);

        // create new end date control
        const newEndDateControl = new FormControl(null, {
          nonNullable: false,
          validators: [],
        });
        newEndDateControl.reset();
        const newFormGroup = this.datePairs();

        // swap new control into new form group
        newFormGroup.removeControl('endDate');
        newFormGroup.addControl('startDate', newEndDateControl);

        // add new form group to dates array
        datesArray.push(newFormGroup);

        // should probably only initialise new element, rather than all again
        this.formGetters = this.initFormGetters(this.datesInfo);

        // should probably initialise new error state matcher too

        // need to add delay since,
        // asynchronouse HTML may not have rendered the 4th element to DOM
        // (a bit annoying!)
        // I'd like to make the last End Date (i) modifiable and (ii) not required
        setTimeout(() => {
          const inputs = document.querySelectorAll(
            'div[formArrayName="datesArray"] ' + 'input[id^="endDate"]'
          );
          const lastInput = inputs[inputs.length - 1] as HTMLInputElement;
          if (lastInput) {
            lastInput.removeAttribute('readonly');
            lastInput.removeAttribute('required');
            lastInput.removeAttribute('aria-required');
          }
        }, 1000);
      } else {
        console.log('last formGroup is not valid');
      }
    } else {
      // TO IMPLEMENT
    }
  }

  protected removeLastDatePair() {
    // TO IMPLEMENT
  }

解决方案 #

核心思路是通过FormControl的验证器和状态驱动视图，而非直接操作DOM，Angular响应式表单的设计逻辑就是用表单状态控制视图，直接操作DOM会导致状态不一致。

1. 重构日期组创建方法 #

定义统一的日期组创建函数，根据是否为最后一组配置endDate的验证规则：

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

private createDateGroup(isLastGroup: boolean): FormGroup {
  // 最后一组endDate无需必填，其他组必填
  const endDateValidators = isLastGroup ? [] : [Validators.required];
  return new FormGroup({
    startDate: new FormControl(null, { 
      nonNullable: false, 
      validators: [Validators.required] 
    }),
    endDate: new FormControl(null, { 
      nonNullable: false, 
      validators: endDateValidators
    })
  });
}

2. 初始化表单 #

初始化时创建3组日期对，前两组为普通组，第三组作为初始最后一组：

ngOnInit(): void {
  const datesArray = new FormArray([]);
  
  // 添加前两组（endDate必填）
  for (let i = 0; i < 2; i++) {
    datesArray.push(this.createDateGroup(false));
  }
  // 添加第三组（初始最后一组，endDate非必填）
  datesArray.push(this.createDateGroup(true));
  
  this.datesInfo = new FormGroup({
    datesArray: datesArray
  });
  
  this.formGetters = this.initFormGetters(this.datesInfo);
}

3. 重构新增日期组逻辑 #

新增时先将上一组的endDate改为必填并禁用，再添加新的最后一组：

protected addDatePair() {
  const datesArray = this.datesInfo.get('datesArray') as FormArray;
  const lastIndex = datesArray.length - 1;
  const lastFormGroup = datesArray.at(lastIndex) as FormGroup;

  // 仅验证通过时新增
  if (lastFormGroup.valid) {
    // 1. 配置上一组的endDate：必填+禁用
    const prevEndDate = lastFormGroup.get('endDate') as FormControl;
    prevEndDate.setValidators([Validators.required]);
    prevEndDate.disable({ emitEvent: false }); // 禁用控件避免编辑
    prevEndDate.updateValueAndValidity({ emitEvent: false }); // 更新状态

    // 2. 添加新的最后一组（endDate非必填+可编辑）
    datesArray.push(this.createDateGroup(true));
    
    this.formGetters = this.initFormGetters(this.datesInfo);
  } else {
    console.log('最后一组表单未通过验证，无法新增');
  }
}

4. 实现删除日期组逻辑 #

删除后将新的最后一组endDate恢复为可编辑、非必填：

protected removeLastDatePair() {
  const datesArray = this.datesInfo.get('datesArray') as FormArray;
  // 至少保留1组（可根据需求调整为保留3组）
  if (datesArray.length > 1) {
    datesArray.removeAt(datesArray.length - 1);
    
    const newLastIndex = datesArray.length - 1;
    const newLastFormGroup = datesArray.at(newLastIndex) as FormGroup;
    const newLastEndDate = newLastFormGroup.get('endDate') as FormControl;
    
    // 恢复最后一组endDate：清空验证器+启用控件
    newLastEndDate.clearValidators();
    newLastEndDate.enable({ emitEvent: false });
    newLastEndDate.updateValueAndValidity({ emitEvent: false });
    
    this.formGetters = this.initFormGetters(this.datesInfo);
  }
}

5. 模板层调整 #

通过表单状态绑定视图属性，无需操作DOM：

<div formArrayName="datesArray" *ngFor="let group of datesInfo.get('datesArray')['controls']; let i = index">
  <div [formGroupName]="i">
    <input 
      formControlName="startDate" 
      placeholder="开始日期"
      required
    >
    <input 
      formControlName="endDate" 
      placeholder="结束日期"
      <!-- 仅最后一组可编辑 -->
      [readonly]="i !== datesInfo.get('datesArray')['controls'].length - 1"
      <!-- 仅非最后一组必填 -->
      [required]="i !== datesInfo.get('datesArray')['controls'].length - 1"
    >
    <!-- 仅非最后一组显示删除按钮 -->
    <button 
      *ngIf="i !== datesInfo.get('datesArray')['controls'].length - 1" 
      (click)="removeLastDatePair()"
    >
      删除
    </button>
  </div>
</div>
<button (click)="addDatePair()">新增日期组</button>

关键注意点 #

• 彻底移除setTimeout操作DOM的逻辑，依赖Angular表单状态自动同步视图
• 用setValidators/clearValidators结合updateValueAndValidity控制验证规则
• 用enable/disable控制控件可编辑状态，配合模板readonly绑定实现需求
• 始终通过表单数组长度判断最后一组，保证逻辑一致性

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