Omega Omega - 6 months ago 59
AngularJS Question

Getting [Object object] when using ng-model on a named form

If I have the following:

<form
id="registration"
name="registration"
method="POST"
>

<input
type="text"
name="first_name"
id="first-name"
ng-model="registration.first_name"
placeholder="First name"
/>


When my form displays, fields configured as above end up having
[Object object]
inside of them for their initial value.

What am I doing wrong here and what's the correct way to get two-way binding inside of a form?

Answer

Setting the name attribute on a form creates a scope object which is useful for validation but is not meant to be used for the ng-model attributes of inputs.

If you use a separate scope variable for ng-model, it will work as you expect:

<form
    ...
    name="reg"
    ...
>

<input
    ...
    ng-model="registration.first_name"
    ...
/>

Demo