Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:

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

AngularJS Model View

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.

share|improve this question
    
Read the documentation. You sound like you want to put loginForm.username as your ng-model attribute value (and similarly fix other inputs). – hon2a Nov 25 '14 at 20:00
up vote 0 down vote accepted

Everything in the view will be added to the $scope if defined there, so yours is getting set as $scope.username instead of $scope.loginForm.username.

You can be more explicit like so:

<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="loginForm.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="loginForm.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>
share|improve this answer
    
the loginForm automatically gets created by angular so long as I have given the form a name. But actually namespacing the ng-models is what fixed it. I guess I assumed it would automatically place them in the form object for me. Go figure. – richbai90 Nov 25 '14 at 20:21
    
Interesting; I didn't know that behavior. I'll update my answer and thanks for adding input – tyler Nov 25 '14 at 21:06

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.