I am trying to populate my Form dynamically using API values. For displaying values I am getting correct data in right rows but when I click on edit I get an extra row and I observed that in place of 4 formcontrol names I have 5 control names and when i click on submit i get a json array with ist object as null
Can you please help me in getting this error correct
here is snapshot of console log and edit data screen Edit data and console log
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NgxSmartModalService } from 'ngx-smart-modal';
import { ServicesProvider } from '../../providers/services/services';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
@IonicPage({
segment: 'schedule/people/:id'
})
@Component({
selector: 'page-people-information',
templateUrl: 'people-information.html',
})
export class PeopleInformationPage {
eventId: any;
peoples;
orderForm: FormGroup;
employees;
pesonData;
items
globalIndex;
edit:boolean=false;
addData;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public services: ServicesProvider,
private ngxSmartModalService: NgxSmartModalService,
private formBuilder: FormBuilder
) {
this.eventId = this.navParams.get('id');
}
createItem(index,data): FormGroup {
let disData,br,ms,tt,ad,dr
console.log(index);
if(index==null){
console.log('do nothing');
}
else{
disData=(data[index]['distPerAph']);
br=(data[index]['backRoomInd']);
ms=(data[index]['meetSite']);
tt=(data[index]['teamtype']);
ad=(data[index]['adder']);
dr=(data[index]['driver']);
}
return this.formBuilder.group({
distPerAph: disData,
backRoomInd: br,
meetSite:ms,
teamtype:tt,
adder: ad,
driver:dr
});
}
addRow(value) {
console.log(value);
}
ionViewDidLoad() {
this.services.getScheduledPeople("24048833").subscribe(res=>{
console.log({res});
this.peoples=res[0];
this.pesonData=res[0];
this.callmw()
this.items = this.addData.get('items') as FormArray;
console.log("people length",this.peoples.length);
this.peoples.forEach((value,index)=>{
console.log(value);
this.globalIndex=index
this.items.push(this.createItem(this.globalIndex,this.pesonData));
})
})
}
callmw(){
console.log("callw called");
this.addData = this.formBuilder.group({
items: this.formBuilder.array([ this.createItem(this.globalIndex,this.pesonData) ])
});
}
goToDetailsScreen() {
this.navCtrl.setRoot('DistrictScheduleDetailsPage', {id: this.eventId});
this.navCtrl.popToRoot();
}
goToAddPeopleScreen() {
this.navCtrl.push('AddPeoplePage', {id: this.eventId});
}
goToAvailableAset() {
this.navCtrl.push('AvailableAsetPage', {id: this.eventId});
}
goToEdit(){
this.edit=true;
}
cancelEdit(){
this.edit=false;
}
appPeopleModal(){
this.ngxSmartModalService.getModal('assignModal').open();
}
} <form [formGroup]="addData">
{{addData.get('items')}}
<div formArrayName="items"
*ngFor="let people of addData.get('items').controls | slice:0:4; let i=index" class="green-wrap">
<div class="people-table" [formGroupName]="i">
<div class="column-1">
<div class="blueBox">
<label>{{pesonData[i]?.employeeName}}</label>
<div *ngIf="people.adderCode=='SPSM'">Icon</div>
</div>
</div>
<div class="column-2">
<div class="blueBox">
{{pesonData[i]?.badgeId}}
</div>
</div>
<div class="column-2">
<div class="blueBox">
{{pesonData[i]?.perAph}}
</div>
</div>
<div class="column-2">
<div class="blueBox">
{{pesonData[i]?.ranking}}
</div>
</div>
<div class="column-2">
<div class="blueBox">
{{pesonData[i]?.rate}}
</div>
</div>
<div class="column-2">
<div class="blueBox">
{{pesonData[i]?.hoursToEvent}}
</div>
</div>
<div class="column-2">
<div class="blueBox">
<input type="number" min="1" name="people.distPerAph"
formControlName="distPerAph" [value]="33" placeholder="{{pesonData[i]?.distPerAph||'null'}}">
<!-- {{people.distPerAph ||'Null'}} -->
</div>
</div>
<div class="column-2">
<div class="blueBox">
<!-- {{people.adder}} -->
<select formControlName="adder" >
<option [selected]="pesonData[i]?.adder" [value]="pesonData[i]?.adder" >1</option>
<option >2</option>
<option >3</option>
</select>
</div>
</div>
<div class="column-2">
<div class="blueBox">
<select name="" formControlName="teamtype" name="people.teamtype">
<option >None</option>
<option >Company</option>
<option >Private</option>
</select>
</div>
</div>
<div class="column-2">
<div class="blueBox">
<!-- {{people.driver}} -->
<select formControlName="driver" name="people.driver" >
<option >True</option>
<option >False</option>
<option >Private</option>
</select>
</div>
</div>
<div class="column-2">
<div class="blueBox">
<!-- {{people.meetSite}} -->
<select formControlName="meetSite" name="people.meetSite">
<option >Store Parking</option>
<option >Store Parking 2</option>
<option >Store Parking 3</option>
</select>
</div>
</div>
<div class="column-2">
<div class="blueBox">
<!-- {{people.backRoomInd}} -->
<select formControlName="backRoomInd" name="people.backRoomInd">
<option >Yes</option>
<option >No</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
