Странный formArray поведение в Angular2

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.

Я хотел бы видеть свой компонент/контроллер слишком