Angular2中FormControlName的动态绑定答案

【问题标题】：Dynamic binding for FormControlName in Angular2Angular2中FormControlName的动态绑定
【发布时间】：2019-11-20 20:23:22
【问题描述】：

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

组件中的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>

我想绑定通用组件中的控件。

我试过了。

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

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

【问题讨论】：

标签： angular

【解决方案1】：

刚刚遇到同样的问题...

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

【讨论】：

【解决方案2】：

可以嵌套表单。我想你会在这篇文章中找到你需要的：

How to Build Nested Model-driven Forms in Angular 2

如果您不需要嵌套表单，那么直接使用 FormBuilder 进行绑定是非常简单的（该示例包括最后两个字段上的验证器）：

import { FormBuilder, Validators, FormGroup } from '@angular/forms';

let myForm = formBuilder.group({
     firstName: [this.myModel.firstName],
     lastName: [this.myModel.lastName],
     userName: [this.myModel.userName, Validators.required],
     Password: [this.myModel.Password, Validators.required]            
});

【讨论】：

嗨，Mikael，我想你没有得到我的问题。让我再解释一下。我已经将表单绑定到 formGroup，我需要动态绑定 formContolName，以便可以为其创建文本输入组件。我只是将 formControl Name 传递给组件，它会自动呈现绑定到现有组。