AngularJS $scope form attribute is undefined after ng-submit

Question

I'm starting with Angular and I'm still very confused with syntax and the many different ways I can code to get the same result.

My latest problem is that when I submit a form, I can't get its values by doing $scope.attribute_name

HTML

<body ng-app="myApp">
        <div ng-include src="'menu.html'"></div>
        <div id="container" ng-controller="MainController">
            <div ui-view></div>
        </div>
    </div>

login.html (included by Route)

<form name="form" name='' action="" ng-submit='login($event)'>
    <input type="text" name='username' ng-model='username' required />
    <input type="text" name='password' ng-model='password' required />
    <button>Enviar</button>
</form>

JS

 var app = angular.module('myApp', ['ui.router']);
 app.controller('MainController',['$scope',function($scope){
        $scope.login = function ($event){
            alert($scope.username)
            $event.preventDefault();
        }
}]);

It always alert "undefined" I can get the values by doing the following

$event.target.username

Just like on Meteor.

Any ideas?

@edit1

I added user as the model's object

HTML

<form name="form" name='teste' action="" ng-submit='login($event)'>
    <input type="text" name='username' ng-model='user.username' required />
    <input type="text" name='password' ng-model='user.password' required />
    <button>Enviar</button>
</form>

JS

app.controller('MainController',['$scope',function($scope){
    $scope.login = function ($event){
        alert($scope.user.username)
}
}]);

I still get undefined though

always...always..always use an object in ng-model...it's a golden rule — charlietfl, Aug 28 '15 at 02:39
What he means by that comment is to make sure that you're binding to an object (eg: ``) and not a primitive value like a string (eg don't do this: `` ). The problem is that some directives (`ng-if`, `ng-include`, etc) create child scopes using prototypical inheritance. This breaks the binding when the model is a primitive value (as opposed to an object). It's probably the most common problem people run into w/Angular. — Sunil D., Aug 28 '15 at 02:46
Some light reading for you: http://stackoverflow.com/q/17606936/398606 and http://stackoverflow.com/q/14049480/398606 — Sunil D., Aug 28 '15 at 02:48
how can I access username at controller? I still get undefined — Victor Ferreira, Aug 28 '15 at 03:25
If you bound the input to the model with `ng-model="user.username"` then you would access this in the controller using `$scope.user.username` — Sunil D., Aug 28 '15 at 03:34
You will also need to declare the `user` object on the scope, so that any child scopes have an object to inherit... Add `$scope.user = { };` to the first line of the controller so that object exists before the child scopes are created. — Sunil D., Aug 28 '15 at 03:38

score 0 · Answer 1 · answered Apr 13 '16 at 12:12

<form name="form" name='teste' action="" ng-submit='login()'>
    <input type="text" name='username' ng-model='user.username' required />
    <input type="text" name='password' ng-model='user.password' required />
    <button>Enviar</button>
</form>

define your $scope inside the controller as below. Because attributes are registered to the $scope of the controller when the controller initializes.

app.controller('MainController',['$scope',function($scope){
    $scope.user={}; //DEFINE $scope variable if dot is given to variable.
    $scope.login = function (){
        alert($scope.user.username)
}
}]);

Thanks

AngularJS $scope form attribute is undefined after ng-submit

1 Answers1

Linked