form control error:ERROR Error: No value accessor for form control with unspecified name attribute

Question

In the below component when the component is loaded in the angular4 app I keep getting the error:

ng:///HeaderModule/HeaderComponent.ngfactory.js:334

Answer 1

This error is emitted, if you forget to specify the nameattribute for an ngModel.

You can find following line in your html that contains the error:

<span class="badge badge-sm up bg-danger pull-right-xs" [hidden]="notificationCount<=0" [(ngModel)]="notificationCount"></span>

As you can see, there is no name attribute.

Answer 2

Use ngDefaultControl directive to make your form has default 2way binding

<input type="text" [(ngModel)]="name" ngDefaultControl>

Answer 3

in ionic 4 i had this error in my code:

<ion-label [name]="num_lable"                                       [(ngModel)]="num_temp[i]"> {{num_temp[i]}}</ion-label>

i changed code to: (ngModel is Unnecessary in my code)

<ion-label> {{num_temp[i]}}</ion-label>

and now error not shown :)

Answer 4

In my case, this worked like this

Just added the name="searchInput"

Before

  <input type="text"  nz-input placeholder="Search Project"
                            [(ngModel)]="searchInput" (ngModelChange)="search()">

After

 <input type="text" name="searchInput" nz-input placeholder="Search Project"
                            [(ngModel)]="searchInput" (ngModelChange)="search()">