Getting the specified value from the FormArray in Angular 9

Question

I have a FormGroup which has a FormArray Element:

this.addForm = new FormGroup({
  id: new FormControl(''),
  user_id: new FormControl(3),
  client_id: new FormControl('', Validators.required),
  type: new FormControl('', Validators.required),
  description: new FormControl(''),
  payment_ref: new FormControl(''),
  registration_date: new FormControl(''),
  status: new FormControl('', Validators.required),
  sale_date: new FormControl(''),
  payment_date: new FormControl(''),
  total_price: new FormControl(''),
  services: new FormArray([
    new FormGroup({
      service_id: new FormControl('', Validators.required),
      description: new FormControl('', Validators.required),
      unit: new FormControl('', Validators.required),
      price: new FormControl(''),
      quantity: new FormControl(''),
      total_price: new FormControl(''),
    }),
  ])
});

In the GUI i can add a new FormArray by clicking a button. The GUI looks like this:

When I select a Servie in the Choose Service part the Description and the price should be filled with data automatically. The code for this part looks like this:

getSelectedService(event,index){
console.log(event.value);
 this.http.get("http://localhost/finance/server/public/api/v1/service" + '/' + event.value)
 .toPromise().then(data => 
  {
    //console.log(data);
    this.getSelectedServiceData = data;
    // console.log(this.getSelectedServiceData.service);
    //console.log(this.addForm.get('services'));
    this.addForm.get('services').patchValue([this.getSelectedServiceData.service]);
    console.log(this.addForm.get('services').value);

  });

}

The problem is that when I add another row and I try to choose from the select box the Service, the description and the price changes but of the first row not of the specified row. Any help?

@PrinceIsNinja I get the data from the Laravel, I don't think I can make a stack blitz, and the project is complicated. — Çlirim Kastrati
– Çlirim Kastrati, Commented May 6, 2020 at 17:31
if you want to access data inside the formarray, you need to use (this.addForm.services as FormArray).controls[0].value after this you need to patch this value to newly added formarray — Jasdeep Singh
– Jasdeep Singh, Commented May 6, 2020 at 17:35

Jasdeep Singh · Accepted Answer · 2020-05-07 06:24:49Z

1

if you want to access data inside the formarray, you need to use below statement:

(this.addForm.services as FormArray).controls[0].value

Now you need to to patch this value to newly added formarray

answered May 7, 2020 at 6:24

Jasdeep Singh

8,3411 gold badge17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting the specified value from the FormArray in Angular 9

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related