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

angularjs, data-binding, forms

Solution

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

Problem

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?

Original source