Получение дополнительной формы controlName при добавлении данных в мой FormArray из API

Question

Я пытаюсь заполнить мою форму динамически, используя значения API. Для отображения значений я получаю правильные данные в правильных строках, но когда я нажимаю на редактирование, я получаю дополнительную строку, и я заметил, что вместо 4 имен formcontrol у меня есть 5 управляющих имен, и когда я нажимаю на submit, я получаю массив json с ist объект как ноль

Не могли бы вы помочь мне исправить ошибку

вот снимок экрана журнала консоли и экрана редактирования данных Редактирование данных и журнала консоли

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>

Answer 1

когда вы присваивали массив форм в то время, когда вы передавали this.createItem (this.globalIndex, this.pesonData), который добавит одну форму с нулевым значением

замените вашу функцию callmw ниже.

callmw(){
  console.log("callw called");
  this.addData = this.formBuilder.group({
   items: this.formBuilder.array([])
 });
}