Angular2中FormControlName的动态绑定 [英] Dynamic binding for FormControlName in Angular2

问题描述

我正在创建嵌套组件.有多个formGroups我想动态地绑定它们.例如.

I am creating nested components. Having multiple formGroups I want to bind them dynamically. For eg.

forGroup就像

forGroup in a component is like

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

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

HTML is something like & it is for multiple controls..

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

我想将控件绑定到公共组件中.

I want to bind the controls in common component.

我尝试过这个.

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

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

So I am creating common HTML but when I try to bind this its giving me error on binding the directive formControlName="formControls.name //withwhat I am passing"

推荐答案

只是遇到了同样的问题...

Just ran into the same problem ...

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

此处的更多信息 https://angular.io/docs/ts/latest/cookbook/dynamic-form.html .

这篇关于Angular2中FormControlName的动态绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！