如何在现有 formArray 上添加新行？ Angular

Question

On this form I need to add new row and remove row? How to do

  editCity() {   
    this.form = this.fo'',))),
      recepieType:
  } 

 createForm() {

this.form = this.formBuilder.group({
});

}

I need to add function which is add new row or delete existing row.

Answer 1

Here is the method to add ingredient:

addIngredients() {
    let ingredientsCtrl = <FormArray> this.form.controls['ingredients']
    ingredientsCtrl.push(this.fb.group({ing: [null]}));
}

You can delete the ingredient(formGorup) using array index of the object

Here is the method to delete ingredient:

deleteIngredients(index: number) {
    let ingredientsCtrl = <FormArray> this.form.controls['ingredients']
    ingredientsCtrl.removeAt(index);
}

Answer 2

I recently implemented with a simpler and neat code:

HTML:

<div>
    <input *ngFor="let field of fieldArray; let i = index;" type="text" [(ngModel)]="fieldArray[i]"  >
</div>

TS:

fieldArray: Array<string> = [];
newAttribute: string = "";


addMoreRows(type:string){

        this.fieldArray.push(this.newAttribute);
        this.newAttribute = "";


    }

***Your formArray is fieldArray here. This might not be the exact code you need, but off course you can take the lead from here, if helpful.

I didnt use form builder etc. stuff. newAttribute is just an empty filler placeholder.