angular - Angular2 中 FormControlName 的动态绑定(bind)

Question

我正在创建嵌套组件。有多个 formGroups 我想动态绑定(bind)它们。例如。

组件中的forGroup就像

formGroup : {
    controls:{
        firstName: FormControl,
        lastName: FormControl,
        userName: FormControl,
        Password: FormControl
    }
}

HTML 类似于 & 它用于多个控件..

<div [formGroup]='formGroup'>
    <div class="error-box">{{formGroup.controls.get('firstName').errors}}</div>

    <div *ngIf="formControl.firstName?.visible" [ngClass]="{'has-error': formControl.firstName.error}">
        <label>{{formGroup.controls.get('firstName').label}}</label>
        <input type="text" formControlName="firstName" [maxlength]="formContrl.firstName?.maxLength">
        <span class="error" *ngif="formControl.firstName.error"></span>
    </div>

    <div class="error-box">{{formGroup.controls.get('lastName').errors}}</div>

    <div *ngIf="formControl.lastName?.visible" [ngClass]="{'has-error': formControl.lastName.error}">
        <label>{{formGroup.controls.get('lastName').label}}</label>
        <input type="text" formControlName="lastName" [maxlength]="formContrl.lastName?.maxLength">
        <span class="error" *ngif="formControl.lastName.error"></span>
    </div>
</div>

我想绑定(bind)普通组件中的控件。

我试过了。

<text-input [group]="formGroup.controls.firstName" [formControls]="formControl.firstName"></text-input>

所以我正在创建通用 HTML，但是当我尝试绑定(bind)它时，在绑定(bind)指令 formControlName="formControls.name//with I am passing"

时出现错误

Answer 1

刚遇到同样的问题...

您必须使用 [formControlName]="formControls.name" 而不是 formControlName="formControls.name"。

更多信息在这里 https://angular.io/docs/ts/latest/cookbook/dynamic-form.html .