Pushing Multiple Values to a FormArray

Question

I am actually stuck here. Tried searching the net, but didnt found anything useful enough to use.

I am trying to push value to a FormArray. The problem is that I am array values and I need it to insert it to my Form. I am only able to add one record. It is inserting the last iterated array object to the formArray.

Below is the code:

.TS

salesResult: FormArray;

async ClickSearch() {
//this method get the dto with the mapped formValues. 
const getSalesResult = this.salesEvidenceFormService.getSalesSearchFormGroup(
  this.form
);
//the above method form values passed to the web-api to return result. I get 200 records here. 
const salesSearchResults: any = await this.salesEvidenceService.getSalesSearchData(
  getSalesResult
);

//getting the formArray. this I have used as an arry form. As shown in below code
this.salesResult = this.form.get('salesSearchResult') ;

for (let item of salesSearchResults) {
  this.salesResult.controls[0].setValue(item);
  //this.form.controls.salesSearchResult.value.address = item.address;
}
}

public async form(valuationId: any): Promise<FormGroup> {
const form: FormGroup = this.formBuilder.group({
  id: valuationId,      
  siteAreaUnit: 'm2',
  lettableAreaUnit: 'm2',
  selectedDateRange: 0,
  selectedQuickChoice: '',
  metroNonMetro: 'ALL',
  salesSearchResult: this.formBuilder.array([
    this.getSalesSearchResultForm()
  ])
});
return await form;
  }

getSalesSearchResultForm(): FormGroup {
return this.formBuilder.group({
  id: this.formBuilder.control(''),
  masterId: this.formBuilder.control(''),
  address: this.formBuilder.control(''),
  salePrice: this.formBuilder.control(''),
  saleDate: this.formBuilder.control(''),
  initialYield: this.formBuilder.control(''),
  equivalentYield: this.formBuilder.control(''),
  nlaPsm: this.formBuilder.control(''),
  siteAreaPsm: this.formBuilder.control(''),
  lettableArea: this.formBuilder.control(''),
  wale: this.formBuilder.control(''),
  description: this.formBuilder.control(''),
  commercialSalesExists: this.formBuilder.control(''),
  documentId: this.formBuilder.control(''),
  totalRecord: this.formBuilder.control('')
});

}

I just want to insert the record to my form. so that I can interate it in my html to show the records returned from API. I dont know what am I doing wrong here

Answer 1

I got it right when I used the Push method. Below is what I implemented. A general example:

const tempContainer = this.formBuilder.array([]);
for (const current of formArray.controls) {
  const existing = this.saveForm.controls.find(
    x => x.value.Id === current.value.Id
  );

  if (existing) {
    tempContainer.push(existing);
  } else {
    tempContainer.push(current);
  }
}