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

我对嵌套模型驱动窗体没有多少经验，但是我找到了一些资源。

继承人的通过实例的香饽饽：

<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.

我想看到你的组件/控制器太