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

Question

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 :)

TheSharpieOne · Accepted Answer · 2014-10-24 21:06:23Z

4

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>

answered Oct 24, 2014 at 21:06

TheSharpieOne

25.7k9 gold badges71 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related