CODEWITHSUNDEEP
angular6angular7formarrayformgroups
Running Rabbit
Running Rabbit

Reputation: 2720

Pushing Multiple Values to a FormArray

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

Upvotes: 0

Views: 3955

Answers (2)

Running Rabbit
Running Rabbit

Reputation: 2720

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

Upvotes: 0

Roshan Dangol
Roshan Dangol

Reputation: 25

I also had similar problem and posted the question. The answer from "ysf" in my post helped me solve it. you can find the solution in comment by "ysf". Though the post is old, I hope it will be of some help.Link to the post is:-

Formarray doesnt show all the records received from service/api

Upvotes: 1

Related Questions