CODEWITHSUNDEEP
htmlangularjsformsinput
Ku Jin Shin
Ku Jin Shin

Reputation: 117

AngularJS: Form input having same ng-model and name attribute

I am currently implementing a form in AngularJS and I have faced with this issue that I cannot figure out why it is happening.

Here is the issue:

When I put same ngModel name and name attribute name, the input field gets filled with [object Object].

For example:<input type="text" ng-model="myForm.firstname" name="firstname"> will cause enter image description here

I am guessing that this is caused by name gets bind to ngModel . Not to sure why and what is causing this..

Here is the plunker: http://plnkr.co/edit/ErEuQK4WNuAC6fg0xmJQ?p=preview

Thanks in advance :)

Upvotes: 2

Views: 2631

Answers (1)

TheSharpieOne
TheSharpieOne

Reputation: 25726

This stems from the name of your form. Angular automatically sets up your form in the scope and using the name attribute for each of the inputs to represents that input. It contains all of the validation and other field level metadata.

Because of this, you should not modify the $scope'd form (in your case, myForm) directly. If you are trying to store the values of the input, you should use a different object.

<form name="myForm">
  <input type="text" ng-model="myFormValues.firstname" name="firstname">
  <input type="text" ng-model="myFormValues.lastname" name="last_nm">
</form>

Upvotes: 4

Related Questions