1

My form in Angular Js is like below.

<form ng-submit="doLogin(loginForm.$valid);" novalidate>
    <input type="text" name="EmailAddress" ng-model="loginForm.EmailAddress" required/>
    <input type="password" name="Password" ng-model="loginForm.Password" required/>
    <button type="submit" ng-disabled="loginForm.$invalid">
        Login
    </button>
</form>

I have both textbox set as required and still on form load, button is not showing disabled but code is already there ng-disabled="loginForm.$invalid". Am I missing something?

Improve this question
2
  • 1
    Yes - A name="loginForm" on the form element Commented Feb 10, 2017 at 18:50
  • You're confusing the model (i.e. your loginForm object, containing the entered email address and the entered password), with the form controller created by angular and containing the $valid, $invalid, etc. fields. Don't use the same name for thse two different things. Add name="myForm" to your form, and use ng-disabled="myForm.$invalid". Commented Feb 10, 2017 at 18:54

2 Answers 2

Reset to default
1

You're confusing the model (pure data, i.e. your loginForm object, containing the entered email address and the entered password), with the form controller created by angular and containing the $valid, $invalid, etc. fields.

Don't use the same name for those two different things. I would rename your object credentials (since it's not a form), and would use loginForm for the actual form (using the name attribute):

$scope.credentials = {};

----

<form name="loginForm" ng-submit="doLogin(loginForm.$valid);" novalidate>
    <input type="text" name="EmailAddress" ng-model="credentials.EmailAddress" required/>
    <input type="password" name="Password" ng-model="credentials.Password" required/>
    <button type="submit" ng-disabled="loginForm.$invalid">
        Login
    </button>
</form>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Try looking here

<body data-ng-app="testapp">
<div data-ng-controller="testCtrl">
     <h1>Test {{name}}!!</h1>

    <form name="loginForm" action="login" novalidate>
        <input type="email" name="email" ng-model="email" placeholder="email" required/>
        <input type="password" name="password" ng-model="passowrd" placeholder="password" required/>
        <button type="submit" ng-disabled="loginForm.$invalid">Login</button>
        <p ng-show="loginForm.$invalid">Please fix your form.</p>
        <p ng-show="loginForm.email.$invalid">Please fix your email.</p>
        <p ng-show="loginForm.password.$invalid">Please fix your password.</p>
    </form>
</div>
<script>
    var testapp = angular.module('testapp', []);
    var testCtrl = function($scope) {
        $scope.name = 'validation';
    };
</script>

CREDITS: @Davin Tryon Angular JS form validation does not seem to work

Improve this answer

1 Comment

Binding directly to the scope, instead of binding to fields of an object, is bad practice. It will lead to subtle bugs if one of the inputs is inside an ng-if or ng-repeat for example, which create their own scope.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.