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?
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"
...
/>
I guess either the registration scope is not initialized or registration.first_name is an object.
Have a look at this plunker: http://plnkr.co/edit/bdbs0XVB8hZSodOTYyM4?p=preview
Initialize the registation model either in controller or using ng-init ng-init="registration = {}"
If registration.first_name is an object then this will be displayed as [Object object]. You have to supply a proper string value as model to the ng-model
registration on scope is already being used based on the <form name="registration"> attribute. Take a look at the demo in my answer to see that this is true.Angularjs Form showing [object Object] on load in form fields
I am guessing, it will show this error, only if your form name and ng-model name (value) are same
like
<form name="userform">-------
<input ng-model="userform.firstname">
change your form name or your ng-model value to user or some xyz
If you don't register a controller in ng-controller, you can remove name="registration" from form, because controller has init with forms, i try and works.
plnkr.co/edit/JK3utpe1eERrJeoveaCQ?p=preview
