Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

The directive [(ngModel)]= not working anymore in rc5

Tags:

angular

ngModel is throwing exceptions, this worked fine in rc4

<input [(ngModel)]="par.name" placeholder="name" />

These are the exceptions:

[email protected]?main=browser:260 Uncaught EXCEPTION: Error in ./CommunityListComponent class CommunityListComponent - inline template:10:27 ORIGINAL EXCEPTION: No value accessor for form control with unspecified name ORIGINAL STACKTRACE: Error: No value accessor for form control with unspecified name

like image 805
Greg L Avatar asked Aug 11 '16 02:08

Greg L


People also ask

How do I enable ngModel directive?

This directive is used by itself or as part of a larger form. Use the ngModel selector to activate it. It accepts a domain model as an optional Input . If you have a one-way binding to ngModel with [] syntax, changing the domain model's value in the component class sets the value in the view.

What does [( ngModel )] mean?

The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value.

How do you know if the ngModel is dirty?

checkDirty(value) { if (value. dirty) { ... } }

How do I update my ngModel value?

If we use two way binding syntax for ngModel the value will be updated. So the default (ngModelChange) function will update the value of ngModel property. i.e., user.Name . And the second (ngModelChange) will be triggered printing the user name value in the console.


2 Answers

can also solve by importing FormsModule into your bootstrap module, then it will be available to all components.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from 'app/components/app';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }
like image 158
systemjsFan Avatar answered Nov 06 '22 21:11

systemjsFan


Now you need to set the name on input. For example;

<input [(ngModel)]="par.name" **name="name"** placeholder="name" />

And all directive must be set on *.module.ts.

like image 36
Victor Hugo Avatar answered Nov 06 '22 21:11

Victor Hugo