Question

如果尚未输入或选择行中的一个字段，如何禁用“添加行按钮”？而且当行只剩下一行时，如何禁用“删除按钮”？这是我的stackblitz代码链接

https://stackblitz.com/edit/form-array-patch-ztxnvy?file=app%2Fapp.component.ts

TS

initGroup() {
    let rows = this.addForm.get('rows') as FormArray;
    rows.push(this.fb.group({
      ingredient_id: ['', Validators.required],
      unit_price: new FormControl({ value: '', disabled: true }, Validators.required),
      quantity: ['', Validators.required],
    }))
  }

Answer 1

如何禁用＆＃34;添加行按钮＆＃34;如果该行中的一个字段尚未输入或选择？

您可以在addForm

上使用无效属性

<button [disabled]="addForm.invalid">Add Row</button>

当表单无效时，这将禁用添加行按钮。使用已设置的验证器，当未填写任何行中的任何输入时。

还有如何禁用＆＃34;删除按钮＆＃34;什么时候只剩下一行？

您可以检查表单数组的长度。如果它等于1，则禁用删除按钮

<button [disabled]="addForm.controls.rows.controls.length === 1">Remove</button>

如何禁用单行中的整个字段。我输入值后。就像你点击添加行一样。上一行将不再被编辑？

您可以以编程方式检查该行是否是表单数组中的最后一行。如果是，则启用字段，否则禁用字段。

let rows = this.addForm.get('rows');
rows.controls.forEach((control, index) => {
    // if row is not last row disable fields, else enable fields
    if(index !== rows.controls.length - 1){
        control.controls['ingredient_id'].disable();
        control.controls['quantity'].disable();
    }else{
        control.controls['ingredient_id'].enable();
        control.controls['quantity'].enable();
  }
})

以下是stackblitz演示此内容的分支。

如果在Angular中的行中缺少一个字段，则禁用添加行

1 个答案: