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

It looks like in RC5 the two can no longer be used together, but I could not find an alternative solution.

Here is the component producing the exception:

    <select class="field form-control" [formGroup]="form" [(ngModel)]="cause.id" [name]="name">
    <option *ngFor="let c of causes" [value]="c.text">{{c.text}}</option>
    </select>

AFAIK, the only existing explanation is the following: http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/ — user2363245, Aug 24 '16 at 15:26
Found source of the change: https://github.com/angular/angular/pull/10314 — user2363245, Aug 24 '16 at 15:40

score 251 · Answer 1 · edited Mar 19 '21 at 17:03

251

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

edited Mar 19 '21 at 17:03

Roy

7,811
4
24
47

answered Nov 14 '16 at 12:36

Avenir Çokaj

2,754
1
16
10

3

what does standalone means? – Jas Oct 11 '17 at 11:48
3

It means that its not handled by the form model/data so you can pass data by any object/model you want as it used to be in AngularJS 1 – Avenir Çokaj Oct 12 '17 at 18:38
I only see this problem in my test setup. What is exactly missing? [ngModelOptions]="{standalone: true}" fixes test but changes logic. ngModel is inherited from parent component, that declares ngForm in my case – aholbreich Dec 21 '17 at 13:13
3

`Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7.` [https://next.angular.io/api/forms/FormControlName#use-with-ngmodel](https://next.angular.io/api/forms/FormControlName#use-with-ngmodel) – WasiF Jul 26 '18 at 16:56

score 37 · Answer 2 · answered Aug 03 '17 at 18:31

37

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.

answered Aug 03 '17 at 18:31

saNiks

744
5
15

7

What if you want to use if for validation AND use it with ngModel at the same time though? – Paul Nov 23 '17 at 17:34
1

In my case I missed out to declare formControl for an element inside formGroup ! – Sagar Khatri Nov 28 '18 at 10:32

score 20 · Answer 3 · answered Aug 25 '16 at 09:48

20

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

answered Aug 25 '16 at 09:48

user2363245

1,675
2
11
13

ethemsulan · Answer 4 · 2017-01-13T14:53:53.857

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

score 9 · Answer 5 · answered Nov 06 '20 at 05:08

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('')
});

Fixed my error by adding the element (toggle button )to form group that was missing. The error message does not reveal this. Thank you! — Stan Riley, Apr 28 '22 at 18:47

barış çıracı · Answer 6 · 2017-08-15T08:58:13.770

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>

Ikhlak S. · Answer 7 · 2018-04-29T07:37:15.107

If component has more than 1 form, register all controls and forms

I needed to know why this was happening in a certain component and not in any other component.

The issue was that I had 2 forms in one component and the second form didn't yet have [formGroup] and wasn't registered yet since I was still building the forms.

I went ahead and completed writting both forms complete without leaving a input not registered which solve the issue.

score 1 · Answer 8 · answered Mar 15 '19 at 16:57

I just got this error because I did not enclose all my form controls within a div with a formGroup attribute.

For example, this will throw an error

<div [formGroup]='formGroup'>
</div>
<input formControlName='userName' />

This can be quite easy to miss if its a particularly long form.

score 0 · Answer 9 · edited Sep 05 '19 at 14:35

0

If you want to use [formGroup] with formControlName, you must replace name attribute with formControlNameformControlName.

Example:

This does not work because it uses the [formGroup] and name attribute.

<div [formGroup]="myGroup">
   <input name="firstName" [(ngModel)]="firstName">
</div>

You should replace the name attribute by formControlName and it will work fine like this following:

<div [formGroup]="myGroup">
   <input formControlName="firstName" [(ngModel)]="firstName">
</div>

edited Sep 05 '19 at 14:35

ProblemAnswerQue

535
1
3
18

answered Feb 07 '19 at 12:43

SANA Abdoul Aziz

423
4
14

a solution for this could also be if you're using a [formGroup]="myGroup" and internally reference with [(ngModel)] a property that is nog in the formGroup. try adding [ngModelOptions]="{ standalone: true }" so you tell your compiler it may be excluded and it is a standalone property – ProblemAnswerQue Sep 30 '19 at 14:06

score 0 · Answer 10 · answered Jun 22 '20 at 11:45

0

It looks like you're using ngModel on the same form field as formControlName. Support for using the ngModel input property and ngModelChange event with reactive form directives has been deprecated in Angular v6 and will be removed in Angular v7

answered Jun 22 '20 at 11:45

Qodir Amirov

55
5

score 0 · Answer 11 · answered Jun 13 '23 at 05:30

0

In my case, I was not importing the NgForOF and MatOptionModule, So importing them solved my problementer image description here

answered Jun 13 '23 at 05:30

Preet Bista

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 16 '23 at 01:11

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

11 Answers11

Linked