Dynamic binding for FormControlName in Angular2

Question

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

forGroup in a component is like

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

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.

I tried this.

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

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"

nhenrich · Accepted Answer · 2017-05-11 18:36:37Z

22

Just ran into the same problem ...

You have to use [formControlName]="formControls.name" instead of formControlName="formControls.name".

More information here https://angular.io/docs/ts/latest/cookbook/dynamic-form.html.

edited May 11, 2017 at 18:36

answered May 11, 2017 at 14:18

nhenrich

2762 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mikael Kristensen · Accepted Answer · 2017-02-16 12:39:16Z

-3

It's possible to nest forms. I think you will find what you need in this article:

How to Build Nested Model-driven Forms in Angular 2

If you do not need to nest forms then it is pretty straight forward to just do the binding using FormBuilder (the example includes validators on the two last fields):

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]            
});

answered Feb 16, 2017 at 12:39

Mikael Kristensen

2602 silver badges13 bronze badges

1 Comment

Sankalp Over a year ago

Hi Mikael, I think you haven't got my question. Let me explain again. I already have form binded to formGroup, I need to bind formContolName dynamically so I could create text-input component for same. I just pass formControl Name to the component and it automatically get rendered binding to existing group.

Collectives™ on Stack Overflow

Dynamic binding for FormControlName in Angular2

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related