AngularJs - How do I get my current form in my controller?

Question

I have been following this AngularJS - Server side validation and client side forms SO question, but I can't seem to get it to work.

Given the following code:

<div ng-controller='LoginCtrl'>
    <form id="myForm" onsubmit="return false;" novalidate>
        <input type="text" ng-model="model.userName" />
        <button ng-click="login()">Login</button>
    </form>
</div>

and

app.controller('LoginCtrl', ['$scope', function ($scope) {
    $scope.model = { userName: '' };

    $scope.login = function () {
        console.log($scope.myForm);  // <-- this is undefined
    };
}]);

The console.log shows undefined. I thought that by including the form as a child of the controller div, angular automatically included the form as a variable in my scope.

What am I doing wrong here?

Change your form tag, form name="myform". Angular validation works with form name, not ,id — harishr, Jul 23 '14 at 15:18

score 2 · Accepted Answer · answered Jul 23 '14 at 15:30

change the form tag to

<form name="myForm" onsubmit="return false;" novalidate>

few more points

try not to use id's when working with angular, this will help you get away from jquery
us ng-form, instead of form tag, then you can have child forms, each with its own validation state...

AngularJs - How do I get my current form in my controller?

1 Answers1