Angular2의 이상한 formArray 동작

Question

버그 일지 모르지만 확실하지 않은 것을 발견했습니다. 이 코드를 사용하는 경우

:

<div formArrayName="techs" > 
    <div *ngFor="let tech of techListInFB | async; let i=index">     
    <md-checkbox [formControlName]="i"> 
     {{tech.$key}} - {{tech.name}} 
    </md-checkbox> 
    </div> 
</div> 

을이 오류와 내 응용 프로그램 충돌이 얻을 :

Cannot find control with path: 'techs -> 0' 

을하지만 구성 요소의 템플릿에 어느 곳이 한 줄을 추가하는 경우 :

{{techListInFB | async}} 

모든 것이 정상적으로 작동합니다. 그러면이 한 줄로 어떻게 오류를 제거 할 수 있을까요? 나는 선이 무엇을 바꾸려고 하는지를 보지 못했다.

Answer 1

중첩 모델 기반 양식에 대한 경험이별로 없지만 몇 가지 리소스를 발견했습니다.

Heres는 예를 통해의 고기와 감자 :

<div formArrayName="addresses"> 
     <div *ngFor="let address of myForm.controls.addresses.controls; let i=index" class="panel panel-default"> 
     <div class="panel-heading"> 
      <span>Address {{i + 1}}</span> 
      <span class="glyphicon glyphicon-remove pull-right" *ngIf="myForm.controls.addresses.controls.length > 1" (click)="removeAddress(i)"></span> 
     </div> 
     <div class="panel-body" [formGroupName]="i"> 
      <div class="form-group col-xs-6"> 
      <label>street</label> 
      <input type="text" class="form-control" formControlName="street"> 
      <small [hidden]="myForm.controls.addresses.controls[i].controls.street.valid" class="text-danger"> 
       Street is required 
      </small> 
      </div> 
      <div class="form-group col-xs-6"> 
      <label>postcode</label> 
      <input type="text" class="form-control" formControlName="postcode"> 
      </div> 
     </div> 
     </div> 
    </div> 

및 컨트롤러 :

public myForm: FormGroup; 

    constructor(private _fb: FormBuilder) { } 

    ngOnInit() { 
     this.myForm = this._fb.group({ 
      name: ['', [Validators.required, Validators.minLength(5)]], 
      addresses: this._fb.array([ 
       this.initAddress(), 
      ]) 
     }); 
    } 

    initAddress() { 
     return this._fb.group({ 
      street: ['', Validators.required], 
      postcode: [''] 
     }); 
    } 

    addAddress() { 
     const control = <FormArray>this.myForm.controls['addresses']; 
     control.push(this.initAddress()); 
    } 

    removeAddress(i: number) { 
     const control = <FormArray>this.myForm.controls['addresses']; 
     control.removeAt(i); 
    } 

plnkr with working relatively complex forms, which comes from here.

나는 당신의 구성 요소/컨트롤러를 너무보고 싶어요