2017-02-10 3 views
1

Моя форма в Angular Js выглядит следующим образом.Кнопка submit не отключена в AngularJs

<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> 

У меня есть и текстовое поле набора по мере необходимости и по-прежнему на форме нагрузки, кнопка не отображается отключена, но код уже есть ng-disabled="loginForm.$invalid". Я что-то упускаю?

+1

Да - А 'имя =«LoginForm»' в элементе формы –

+0

Вы вводите в заблуждение модель (т. Е. Ваш объект loginForm, содержащий введенный адрес электронной почты и введенный пароль), с контроллером формы, созданным угловым и содержащим поля $ valid, $ invalid и т. Д. Не используйте одно и то же имя для двух разных вещей. Добавьте в форму форму 'name =" myForm "' и используйте 'ng-disabled =" myForm. $ Invalid "'. –

ответ

1

Вы путаете модели (чистые данные, то есть ваш объект LoginForm, содержащие введенный адрес электронной почты и введенный пароль) , с контроллером формы, созданным угловым и содержащим $ valid, $ invalid и т. д. поля.

Не используйте одно и то же имя для этих двух разных предметов. Я хотел бы переименовать объект credentials (так как это не форма), и будет использовать loginForm для фактической формы (используя имя атрибута):

$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> 
1

Попробуйте посмотреть здесь

<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> 

КРЕДИТОВ: @Davin Трион Angular JS form validation does not seem to work

+2

Связывание непосредственно с областью, вместо привязки к полям объекта, является плохой практикой. Это приведет к тонким ошибкам, если один из входов находится внутри ng-if или ng-repeat, например, которые создают свою собственную область. –

Смежные вопросы