model based forms in angular 2 rc5 not working

Question

I am migrating code from angular beta to RC5 version. and i am facing issue with the model based forms used. As i have to much forms already developed in angular 2 beta. its hard for me to changes model based forms to template based forms. any help in forms migration is highly appreciated.

my existing code is like this

profile.ts

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

 this.firstName = new FormControl();
        this.lastName = new FormControl();
        this.email = new FormControl();
        this.addressLine = new FormControl();
        this.postal = new FormControl();
        this.postalArea = new FormControl();

        this.form = builder.group({
            firstName: this.firstName,
            lastName: this.lastName,
            email: this.email,
            addressLine: this.addressLine,
            postal: this.postal,
            postalArea: this.postalArea,
            photo: this.photo
        });

and template in profile.HTML is like follows

<form class="form-default"  [formGroup]="form">

<input type="text" class="form-control" id="firstName" [(ngModel)]="model.firstName" formControlName="firstName" maxlength="200">

    <input type="text" class="form-control" id="lastName" [(ngModel)]="model.lastName" formControlName="lastName" maxlength="200">
    <input type="text" class="form-control" id="email" [(ngModel)]="model.username" readonly formControlName="email" maxlength="100">

    </form>

I am facing following error in console.

EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in /assets/scripts/my-profile/my-profile.html:176:66 ORIGINAL EXCEPTION: ngModel cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive "formControlName" instead. Example:
<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});

  Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:

  Example:


<div [formGroup]="myGroup">
   <input formControlName="firstName">
   <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
</div>

Still no one is able to answer this question. really strange!! — enRaiser, Mar 13 '17 at 12:13

score 5 · Answer 1 · edited May 23 '17 at 12:09

5

Here you can find the answer to the same problem just add:

[ngModelOptions]="{standalone: true}"

edited May 23 '17 at 12:09

Community

1
1

answered Nov 14 '16 at 12:41

Avenir Çokaj

2,754
1
16
10

Aran Dekar · Answer 2 · 2017-03-29T22:09:37.593

-1

to have the both ngModel and formControl in your html you have to have a model in your component (e.g. firstName in the following example) that you bind to from your html and also you need to build a form group including your desired formControl (e.g. firstNameControl in the following example)

component:

 this.firstName: string;
 this.form = builder.group({
            firstNameControl: this.firstName,                
        });

html

<form [formGroup]="form">    
<input type="text" [(ngModel)]="firstName" [formControl]="form.controls.firstNameControl"></input>
</form

edited Mar 29 '17 at 22:09

answered Oct 06 '16 at 00:02

Aran Dekar

461
5
12

to work with ngModel and have the formControl both on html you have to have a model in the component (e.g. firstName) and then bind to it in ngModel, the sample I have here works for me. – Aran Dekar Mar 29 '17 at 06:03
ok so you mean that order does matter. Can you please rephrase your answer by emphasizing it. because it is difficult to make out. – enRaiser Mar 29 '17 at 11:21

model based forms in angular 2 rc5 not working

2 Answers2

component:

html