angularjs-禁用提交直到所有字段都填满

Question

表单中的提交按钮应该被禁用，直到所有字段都被填满，但我注意到当用户只输入用户名时，按钮就会激活。

<div class="list">
<form id="create" name="pw" method="post">
  <label class="item item-input item-stacked-label">
    <span class="input-label">Username</span>
    <input type="text" placeholder="kojobaah" ng-model="username" required>
</label>

   <label for="password">New Password
    <input type="password" name="user_password" ng-model="user_password" ng-required="confirm_password && !user-password" password-verify="confirm_pasword">
    <p ng-show="pw.user_password.$error.passwordVerify">Passwords do not match</p>
    <p ng-show="pw.user_password.$error.required">This field is required</p>
  </label>
</p>
 <p>
  <label for="password">Confirm Password
    <input type="password" name="confirm_password" ng-model="confirm_password" ng-required="user_password && !confirm_password" password-verify="user_password"> 
    <p ng-show="pw.confirm_password.$error.passwordVerify">Passwords do not match</p>
    <p ng-show="pw.confirm_password.$error.required">This field is required</p>
  </label>
  <br />
  <p align="center"><button ng-disabled="create.$invalid" class="button button-balanced" ng-click="register()">Create Account</button></p>  
  </form>
  </div>

JS

.directive('passwordVerify', function() {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function(scope, elem, attrs, ngModel) {
            scope.$watch(attrs.ngModel, function() {
                if (scope.confirm_password === scope.user_password) {
                    scope.pw.confirm_password.$setValidity('passwordVerify', true);
                    scope.pw.user_password.$setValidity('passwordVerify', true);
                } else if (scope.confirm_password !== scope.user_password) {
                    scope.pw.confirm_password.$setValidity('passwordVerify', false);
                    scope.pw.user_password.$setValidity('passwordVerify', false);
                }
            });
        }
     };
})

有关如何在填写用户名和密码匹配之前禁用按钮的任何帮助？

Answer 1

您的表单名称是 pw，因此这是您需要深入了解 Angular 对整个表单的有效性指令的表单。

简单的改变：

<button ng-disabled="create.$invalid" 
        class="button button-balanced"
        ng-click="register()">
        Create Account
</button>

到：

<button ng-disabled="pw.$invalid" 
        class="button button-balanced"
        ng-click="register()">
        Create Account
</button>

工作Plunker：http://plnkr.co/edit/0zlN2TmEIbGQW5Mq7YJ0?p=preview

更新：将密码字段上的ng-required 切换为简单的true，并将比较逻辑移至按钮上的ng-disabled 指令，以实现所需的验证检查。

<button ng-disabled="pw.$invalid || (user_password != confirm_password)" 
        class="button button-balanced"
        ng-click="register()">
        Create Account
</button>

Answer 2

由于您的表单名称是 pw，只需将您的 CREATE ACCOUNT 按钮更改为：

<button ng-disabled="pw.$invalid" 
        class="button button-balanced"
        ng-click="register()">
        Create Account
</button>