Vfrdtyky

I am trying to implement add multiple lines using Angular Reactive - FormArray.

In the example I have 2 text fields. After entering the data and click the add button I want to add it to the lines.

After adding I am not able to clear the data entry 2 text fields.
And the last added element in the array is still linked to data entry.

Is FormArray suitable in this case, or should I use a simple approach please

Here is my code.

https://stackblitz.com/edit/jay-angular-reactive-array-mwhmcn

I did not get what are trying to do with FormArray, thus I suggest a simpler way to achieve what you want.

Change your TS to:

export class AppComponent  {



  constructor(private fb: FormBuilder) { }

  public simpleArray = ;

  form: FormGroup;



  ngOnInit() {



    this.form = this.fb.group({

      country1: ['', Validators.required],

      service1: ['', Validators.required]

    });



  }



  add() {

    this.simpleArray.push(this.form.value);

    //this.form.reset();

    this.form.get('country1').setValue('');

    this.form.get('service1').setValue('');

  }





  deleteService(i) {

    this.simpleArray.splice(i,1)

  }

}

And your HTML should be :

<form [formGroup]="form">

   <h3>Angular Reactive form -  FormArray Demo </h3>

   Form : {{ simpleArray | json}}

   <br/><br/>

   <div class="form-group">

      <label for="country">Country</label>

      <input required type="text" id="country" class="form-control" formControlName="country1" />

   </div>

   <div class="form-group">

      <label for="service">Serivce</label>

      <input required type="text" id="service" class="form-control" formControlName="service1" />

   </div>

   <br />

   <button type='button' class="btn btn-primary" (click)='add()'>Add Services</button>

   <br />

   <div >

      <div class='row' *ngFor="let line of simpleArray let i=index">             

         <input class='form-control col-md-2' [value]="line.country1" />

         <input class='form-control col-md-2' [value]="line.service1"/>

         <button class='btn btn-primary col-md-1' (click)="deleteService(i)">Delete</button>

      </div>

   </div>

   <br />

</form>

A working Stackblitz