ngModel cannot be used to register form controls with a parent formGroup directive

Question

After upgrading to RC5 we began getting this error:

ngModel cannot be used to register form controls with a parent formGroup 
 directive.
Try using formGroup\         


        

Answer 1

when you write formcontrolname Angular 2 do not accept. You have to write formControlName . it is about uppercase second words.

<input type="number" [(ngModel)]="myObject.name" formcontrolname="nameFormControl"/>

if the error still conitnue try to set form control for all of object(myObject) field.

between start <form> </form> for example: <form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> set form control for all input field </form>.

Answer 2

OK, finally got it working: see https://github.com/angular/angular/pull/10314#issuecomment-242218563

In brief, you can no longer use name attribute within a formGroup, and must use formControlName instead

Answer 3

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


    this.userInfoForm = new FormGroup({
      userInfoUserName: new FormControl({ value: '' }, Validators.compose([Validators.required])),
      userInfoName: new FormControl({ value: '' }, Validators.compose([Validators.required])),
      userInfoSurName: new FormControl({ value: '' }, Validators.compose([Validators.required]))
    });

<form [formGroup]="userInfoForm" class="form-horizontal">
            <div class="form-group">
                <label class="control-label"><i>*</i> User Name</label>
                    <input type="text" formControlName="userInfoUserName" class="form-control" [(ngModel)]="userInfo.userName">
            </div>
            <div class="form-group">
                <label class="control-label"><i>*</i> Name</label>
                    <input type="text" formControlName="userInfoName" class="form-control" [(ngModel)]="userInfo.name">
            </div>
            <div class="form-group">
                <label class="control-label"><i>*</i> Surname</label>
                    <input type="text" formControlName="userInfoSurName" class="form-control" [(ngModel)]="userInfo.surName">
            </div>
</form>

Answer 4

This error apears when you have some form controls (like Inputs, Selects, etc) in your form group tags with no formControlName property.

Those examples throws the error:

<form [formGroup]="myform">
    <input type="text">
    <input type="text" [ngmodel]="nameProperty">
    <input type="text" [formGroup]="myform" [name]="name">
</fom>

There are two ways, the stand alone:

<form [formGroup]="myform">
    <input type="text" [ngModelOptions]="{standalone: true}">
    <input type="text" [ngmodel]="nameProperty" [ngModelOptions]="{standalone: true}">
    <!-- input type="text" [formGroup]="myform" [name]="name" --> <!-- no works with standalone --
</form>

Or including it into the formgroup

<form [formGroup]="myform">
    <input type="text" formControlName="field1">
    <input type="text" formControlName="nameProperty">
    <input type="text" formControlName="name">
</fom>

The last one implies to define them in the initialization formGroup

this.myForm =  new FormGroup({
    field1: new FormControl(''),
    nameProperty: new FormControl(''),
    name: new FormControl('')
});

Answer 5

Expanding on @Avenir Çokaj's answer

Being a novice even I did not understand the error message clearly at first.

What the error message indicates is that in your formGroup you have an element that doesn't get accounted for in your formControl. (Intentionally/Accidentally)

If you intend on not validating this field but still want to use the ngModel on this input element please add the flag to indicate it's a standalone component without a need for validation as mentioned by @Avenir above.

Answer 6

The answer is right on the error message, you need to indicate that it's standalone and therefore it doesn't conflict with the form controls:

[ngModelOptions]="{standalone: true}"