Angular2中奇怪的formArray行为

时间:2016-12-28 16:46:18

标签: angular formbuilder form-control

我发现我认为可能是一个错误,但不确定。

如果我使用此代码:

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

一切正常。那么这一行怎么可能删除错误呢?我看不出改变任何事情的路线。

1 个答案:

答案 0 :(得分:0)

我对嵌套模型驱动的表单没有多少经验,但我发现了一些资源。

以下是一个例子中的肉和土豆:

reply_form

和控制器:

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

plnkr with working relatively complex formswhich comes from here.

我也希望看到您的组件/控制器