Angular中FormArray的amount控件值匹配时启用提交按钮的实现问题

修改步骤 #

1. 调整TS组件代码 #

首先在你的组件类中新增目标值配置、表单启用状态判断逻辑，同时补全创建行表单组的遗漏代码：

// 替换成你要匹配的指定值
private targetAmount = 100;

// 补全创建单行FormGroup的方法，确保包含amount字段
private createRow(): FormGroup {
  return this.fb.group({
    amount: [null],
    // 你的其他表单字段写在这里
  });
}

// 新增判断提交按钮是否可用的getter
get isSubmitAllowed(): boolean {
  // 这里默认判断FormArray中所有行的amount字段都等于指定值
  return this.formArr.controls.every(formGroup => {
    const currentAmount = formGroup.get('amount')?.value;
    return currentAmount === this.targetAmount;
  });
}

addNewRow() {
  this.formArr.push(this.createRow());
}

deleteRow(index: number) {
  this.formArr.removeAt(index);
}

2. 修改HTML提交按钮 #

给提交按钮绑定disabled属性，匹配上面的状态判断：

<button  pButton type="button" label="Submit"
          (click)="onSubmit()"
          [disabled]="!isSubmitAllowed"
          class="button-add"></button>&nbsp;

可选：判断所有amount总和等于指定值 #

如果你的需求是所有行的amount累加和等于指定值才允许提交，把上面的isSubmitAllowed getter替换成以下逻辑即可：

get isSubmitAllowed(): boolean {
  const totalAmount = this.formArr.controls.reduce((sum, formGroup) => {
    return sum + (formGroup.get('amount')?.value || 0);
  }, 0);
  return totalAmount === this.targetAmount;
}

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