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="pw.$invalid" 
     class="button button-balanced" 
     ng-click="register()"> 
     Create Account 
</button> 

ワーキングPlunker：http://plnkr.co/edit/0zlN2TmEIbGQW5Mq7YJ0?p=preview

更新：単にtrueパスワードフィールド上にng-requiredを切り替え、移動に

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

をボタンのng-disabledディレクティブへの比較ロジックによって、必要な確認チェックが実行されます。

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

Answer 2

フォームの名前がPWあるので、単純に自分のアカウントの作成ボタンを変更します。

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