Menu
NgModel is used to create a top-level form group Instance, and it binds the form to the given form value. NgModule: Module used by NgModel is: FormsModule.
The ng-model directive binds the value of HTML controls (input, select, text-area) to application data. It is a part of the FormsModule. This directive is used by itself or as part of a larger form. It accepts a domain model as an optional Input.
See the example for using NgModel as a standalone control. standalone: When set to true, the ngModel will not register itself with its parent form, and acts as if it's not in the form. Defaults to false.
The Angular uses the ngModel directive to achieve the two-way binding on HTML Form elements. It binds to a form element like input , select , selectarea . etc. Internally It uses the ngModel in property, binding to bind to the value property and ngModelChange which binds to the input event.
If ngForm is used, all the input fields which have [(ngModel)]="" must have an attribute name with a value.
<input [(ngModel)]="firstname" name="something">
By setting [ngModelOptions]="{standalone: true}" one tells Angular something like, ignore the form and/or ngForm, just bind it to firstname variable please.
However, if form-tag was used by mistake (like in my case sometimes), changing form to div is another option (but only if your styles don't need form-tag).
As every developer have a common habit, not to read the complete error, just read the first line and start looking for answer from someone else :):) I am also one of them, that's why I am here:
Read the error, clearly saying:
Example 1: <input [(ngModel)]="person.firstName" name="first">
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
What more we need to understand this error?
Use any one option everything will work smooth.
In my case the error happened because below in html markup one more line existed without the name attribute.
<form id="form1" name="form1" #form="ngForm">
<div class="form-group">
<input id="input1" name="input1" [(ngModel)]="metaScript" />
...
<input id="input2" [(ngModel)]="metaScriptMessage"/>
</div>
</form>
But the browser still reports the first row has the error. And it's difficult to discover the source of mistake if you have other elements between these two.
Both attributes are needed and also recheck all the form elements has "name" attribute. if you are using form submit concept, other wise just use div tag instead of form element.
<input [(ngModel)]="firstname" name="something">
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