Question

预期：输入有效电子邮件ID后，应启用模式按钮。发生了：输入有效的电子邮件ID按钮后禁用。这是我在HTML中的输入文本字段：

 <form class="form-inline">
<div class="form-group">
<label for="emailID">Enter Email ID</label>
<input type="email"  class="form-control" id="emailID" ng-model="c.emailID" placeholder="Enter EmailID">    
</div>
<div class="form-group">
<label for="Password">Enter Password</label>
<input type="password" class="form-control" id="password" ng-model="c.password" placeholder="Enter Password">
</div>
    <button type="submit" ng-model="button" ng-click ="submit(c)" ng-disabled="c.emailID" class="btn btn-primary">Login</button>

这是我的AngularjS脚本：`

var myApp1=angular.module('myApp',[]);
  myApp1.controller('myController',['$scope',function($scope)
{   
   $scope.submit=function(c)
   {   
   }
}]);

Answer 1

首先在表单和输入中添加名称：

<form name="myForm" class="form-inline">
<input type="email" name="emailID"  class="form-control" id="emailID" ng-model="c.emailID" placeholder="Enter EmailID">

然后更改您的ng-disabled：

<button type="submit" ng-model="button" ng-click ="submit(c)" ng-disabled="!(myForm.emailID.$valid && myForm.emailID.$dirty)" class="btn btn-primary">Login</button>

添加了$ dirty，因为我们希望用户在启用之前实际输入值。或者，如果您的输入是强制输入字段，则可以在输入中添加必需项。

另请参阅：http://www.w3schools.com/angular/angular_validation.asp

如何在Angular JS中启用/禁用按钮并进行验证

1 个答案: