2014-10-02 49 views
0

我有一个代码,应该禁用一个按钮时:registerForm.$invalid || form.password != form.passwordBis,这应该意味着:“禁用按钮,如果表单无效或如果'$ scope.form。密码'变量不等于'$ scope.form.passwordBis'。“,不是吗?AngularJS ngDisabled没有激活,因为它应该是

所以在这里我有一个代码,如果两个密码匹配,激活按钮。哪些不应该发生,因为第一个条件仍然是错误的!

HTML:

<div ng-app="app" ng-controller="formCtrl"> 
    <form name="registerForm"> 
     <div class="header"> 
      <h2>Create your account</h2> 
     </div> 
     <div class="form-group"> 
      <div class="title">First Name</div> 
      <input type="text" name="firstName" ng-required class="form-control" ng-class="{empty:form.firstName.length==0}" ng-model="form.firstName" required></input> 
     </div> 
     <div class="form-group"> 
      <div class="title">Last Name</div> 
      <input type="text" name="lastName" ng-required class="form-control" ng-class="{empty:form.lastName.length==0}" ng-model="form.lastName" required></input> 
     </div> 
     <div class="form-group"> 
      <div class="title">Email</div> 
      <input type="email" name="email" ng-required class="form-control" ng-class="{empty:form.email.length==0}" ng-model="form.email" required></input> 
     </div> 
     <div class="form-group"> 
      <div class="title">Password</div> 
      <input type="password" name="password" class="form-control" ng-class="{empty:form.password.length==0}" ng-model="form.password" required></input> 
      <input type="password" name="passwordBis" class="form-control" ng-class="{empty:form.passwordBis.length==0}" ng-model="form.passwordBis" minlength="6" required></input> 
     </div> 
     <div ng-if="form.password != form.passwordBis" class="error">Passwords doesn't match.</div> 
     <div class="form-group"> 
      <button class="btn btn-success" ng-click="register()" ng-disabled="registerForm.$invalid || form.password != form.passwordBis">Register</button><br/> 
     </div> 
    </form> 
</div> 

JS:

var app = angular.module("app", []); 

app.controller("formCtrl", function($scope) { 
    $scope.form = { 
      firstName: "", 
      lastName: "", 
      email: "", 
      password: "", 
      passwordBis: "" 
    }; 
}); 

而且你可以测试一下:JSFiddle

我缺少什么?

+0

在Chrome中工作得很好据我所知 – Scott 2014-10-02 20:56:51

+0

这很奇怪我在Chrome上,我试过Firefox。我仍然有这个问题。如果两个密码匹配,该按钮不应该可用。 – Elfayer 2014-10-02 21:00:38

回答

2

从您的表单元素中删除ng-required属性。

对于表单元素,您应该使用ng-requiredrequired,但不能同时使用两者。 ng-required需要一个需要评估为true的表达式,以便根据需要标记表单元素,而required不需要任何值。有关更详细的解释,请参见https://stackoverflow.com/a/16648851/1237995

+0

我从程序的另一部分复制/粘贴了这段代码,忘记删除'ng-required'。谢谢 ! ;) – Elfayer 2014-10-02 21:50:21