Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

forms

angular

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

ng:///HeaderModule/HeaderComponent.ngfactory.js:334 ERROR Error: No value accessor for form control with unspecified name attribute

I have tried removing ngModel and value attributes but nothing has worked.

I'm assuming the issue is with the header .component.html. Below is the html

<!-- Notification area--> <li class="dropdown">     <a href="#" data-toggle="dropdown" class="dropdown-toggle" (click)="changeNotificationStatus()">         <i class="glyphicon glyphicon-bell"></i>         <span class="visible-xs-inline">Notifications</span>         <span class="badge badge-sm up bg-danger pull-right-xs" [hidden]="notificationCount<=0" [(ngModel)]="notificationCount"></span>     </a>     <div class="dropdown-menu w-xl animated fadeInUp"> </li> 

Not sure what causes the problem. If somebody could point out the issue it will be helpful.

like image 327
Shruti Nair Avatar asked Oct 12 '17 11:10

Shruti Nair


People also ask

What is form control name in Angular?

FormControlName is used to sync a FormControl in an existing FormGroup to a form control element by name.

What is Ng_value_accessor?

NG_VALUE_ACCESSORlinkUsed to provide a ControlValueAccessor for form controls.

What is value accessor in Angular?

A ControlValueAccessor acts as a bridge between the Angular forms API and a native element in the DOM. Any component or directive can be turned into ControlValueAccessor by implementing the ControlValueAccessor interface and registering itself as an NG_VALUE_ACCESSOR provider.

What is the use of ngDefaultControl?

Third party controls require a ControlValueAccessor to function with angular forms. Many of them, like Polymer's <paper-input> , behave like the <input> native element and thus can use the DefaultValueAccessor . Adding an ngDefaultControl attribute will allow them to use that directive.


1 Answers

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

<input type="text" [(ngModel)]="name" ngDefaultControl> 
like image 113
Farhad Lavaei Avatar answered Sep 18 '22 07:09

Farhad Lavaei