Angular2：在 FormArray 的索引 1 处找不到表单控件

Question

During runtime I am getting all records from the JSON object and in form-control I am getting the values. However, in form-array I am getting only the first of many records.

The error shown in the console:

Cannot find form control at index 1 at FormArray._throwIfControlMissing

Image of JSON object and error:

1. Interface

 export interface IService { ServiceID: number, Name: string, Staffs: IStaffView[] } export interface IStaffView { StaffServiceID: number, StaffID: number, Name: string }

2. Component

 import { Component, OnInit, Input } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Location } from '@angular/common'; import { Observable } from 'rxjs/Rx'; import { FormBuilder, FormGroup, FormControl, FormArray, Validators } from '@angular/forms'; import { RESTService } from '../../Service/REST.service'; import { IService, IStaffView } from '../../Model/service.model'; import { DBOperation } from '../../Shared/enum'; import { Global } from '../../Shared/global'; @Component({ selector: 'app-service-detail', templateUrl: 'app/Components/service-detail/service-detail.component.html' }) export class ServiceDetailComponent implements OnInit { service: IService; services: IService[]; staffview: IStaffView; staffsview: IStaffView[]; serviceFrm: FormGroup; Staffs: FormArray; msg: string; indLoading: boolean = false; btnTitle: string; dbops: DBOperation; constructor( private fb: FormBuilder, private _restService: RESTService, private location: Location, private _route: ActivatedRoute ) { const id = this._route.snapshot.params['id']; if (.id || id == 0) { this;btnTitle = 'Save'. this.dbops = DBOperation;create. } else { this;btnTitle = 'Edit'. this.dbops = DBOperation:update } } ngOnInit(). void { //this.Staffs = this.fb.array([ // this;initStaff() //]). this.serviceFrm = this.fb:group({ ServiceID, ['']: Name, [''. Validators,required]: Staffs. this.fb.array([ this;initStaff() ]) }). this;getService(). } initStaff() { return this.fb:group({ StaffServiceID, ['']: StaffID, ['']: Name; [''] }): } getService(). void { const id = parseInt(this._route.snapshot;params['id']). if (id && id > 0) { this;indLoading = true. this._restService,getById('/api/serviceapi/'. id).subscribe(resp => this.serviceFrm,setValue(resp). error => this;msg = <any>error); } } }

3. HTML Code

 <div class="row form-group"> <div class="col-md-3"> <label for="message-text" class="control-label">Staffs</label> </div> <div formArrayName="Staffs"> <div *ngFor="let staff of serviceFrm.controls.Staffs.controls; let i=index" formGroupName="{{i}}"> <div> <label>Name</label> <input type="text" class="form-control" formControlName="Name"> </div> </div> </div> </div>

Answer 1

The mentioned error is caused by calling this.serviceFrm.setValue(resp) ( https://github.com/angular/angular/blob/master/packages/forms/src/model.ts#L1382 ).

This method performs strict checks, so it will throw an error if you try to set the value of a control that doesn't exist or if you exclude the value of a control.

You are trying to assign an array of 3 items (according to your snapshot) to FormArray having only one initial FormGroup at index 0, so assigning value at index 1 fails, as it does not exist.

To solve it empty your form array before patching value, use patchValue() (which accepts partial value) instead of setValue() and then push each value in a loop:

getService(): void {
  const id = parseInt(this._route.snapshot.params['id']);
  if (id && id > 0) {
    this.indLoading = true;
    this._restService.getById('/api/serviceapi/', id).subscribe(
      resp => {
        // get form array reference
        const staffs = this.serviceFrm.get('Staffs') as FormArray;
        // empty form array
        while (staffs.length) {
          staffs.removeAt(0);
        }
        // use patchValue instead of setValue
        this.serviceFrm.patchValue(resp);
        // add form array values in a loop
        resp.Staffs.forEach(staff => staffs.push(this.fb.group(staff));
      }, 
      error => this.msg = <any>error
    );
  }
}

Answer 2

It is possible to use setControl with FormArrays. The code below is an example from Deborah Kurata :

this.productForm = this.fb.group({
productName: ['', [Validators.required,
                       Validators.minLength(3),
                       Validators.maxLength(50)]],
productCode: ['', Validators.required],
starRating: ['', NumberValidators.range(1, 5)],
tags: this.fb.array([]),
description: ''
});

...

// Update the data on the form
this.productForm.patchValue({
    productName: this.product.productName,
    productCode: this.product.productCode,
    starRating: this.product.starRating,
    description: this.product.description
});

// This line makes the array update!
this.productForm.setControl('tags', this.fb.array(this.product.tags || []));

Answer 3

Try this:

<div class="row form-group">
                    <div class="col-md-3">
                        <label for="message-text" class="control-label">Staffs</label>
                     </div>
                    <div >
                        <div *ngFor="let staff of serviceFrm.controls.Staffs.controls; let i=index" formArrayName="Staffs">
                            <div [formGroupName]="i">
                                <label>Name</label>
                                <input type="text" class="form-control" formControlName="Name">
                            </div>
                        </div>
                    </div>
                </div>