Disable Add Row If One Field is Missing in Row in Angular

Question

How can i disable the "add row button" IF one field in the row is not yet inputted or selected? And also how can i disable the "remove button" when the row is only one left? Here's my stackblitz code link

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

How can i disable the "add row button" IF one field in the row is not yet inputted or selected?

You can use the invalid property on your addForm

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

This disables the add row button when the form is invalid. With the validators you have set up, when any input in any row is not filled in.

---

And also how can i disable the "remove button" when the row is only one left?

You can check the length of the form array. If it is equivalent to 1 then disable the remove button

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

---

How can i disable the whole field in the single row. After i inputted the values. Like when you click the add row. The previous row will not be anymore be edited?

You can programatically check if the row is the last row in the form array. If it is, then enable the fields, else disable the fields.

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();
  }
})

Here is a fork of your stackblitz demoing this.