In angularjs I make a habit of using dot notation to namespace my models. However when dealing with forms and inputs, if I give my input an ng-model, instead of being added to the scope of the form, its added to the same scope on which the form resides. Is there any way to change this behavior? Here's an example of what I mean
And here's the code that created it
<form id="login-form" name="loginForm">
<label for="login-username" class="hidden">Username </label>
<input id="login-username" ng-minlength="5" type="{{Login.settings.login}}" name="username" ng-model="username" placeholder="Username" required ng-class="{error: !Login.validate(loginForm.username)}" />
<span class="error" ng-class="{hidden: Login.validate(loginForm.username)}">{{loginForm.username.validation[1]}}</span>
<label for="login-password" class="hidden">Password </label>
<input id="login-password" type="password" name="password" ng-model="password" placeholder="Password" required ng-class="{error: !Login.validate(loginForm.username)}" />
<span class="error" ng-class="{hidden: Login.validate(loginForm.password)}">{{loginForm.password.validation[1]}}</span>
<input class="button expand radius" type="submit" value="Login"/>
</form>
As you can see there is an object on the form for both the username and password fields, namespaced as [form name].[field name]
this object holds all the errors for that input and other information, and I'm saving some custom values to it like the validation array for instance; but the actual values of the field seem to be populated on the same scope as the loginForm, instead of as part of the child object. What I'd like to be able to do is something like {{[form name].[field name].value}}
to get the value. I hope what I'm saying makes sense, I'd be happy to clarify if needed.
loginForm.username
as yourng-model
attribute value (and similarly fix other inputs). – hon2a Nov 25 '14 at 20:00