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.
FormControlName is used to sync a FormControl in an existing FormGroup to a form control element by name.
NG_VALUE_ACCESSORlinkUsed to provide a ControlValueAccessor for form controls.
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.
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.
Use ngDefaultControl
directive to make your form has default 2way
binding
<input type="text" [(ngModel)]="name" ngDefaultControl>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With