NG-無効は角

Question

私の要件に無効化されていないが、次のとおりです。

1. 送信]ボタンは前に無効になり、すべてのフィールドを検証する必要があります。
2. すべてのフィールドが有効になったら、[送信]ボタンをクリックしてユーザーがクリックできるようにする必要があります。
3. ユーザーがボタンをクリックすると、もう一度[送信]ボタンを無効にする必要があります。

私はコードの下に使用：

<button type="submit" class="btn" data-ng-disabled="signup.$invalid" ng-disabled="isDisabled" data-ng-click="saveNewUser()">Submit</button> 

と任意のフィールド検証され、ケースの上

if(genderError || stateError || dobError) 
        $scope.isDisabled = false; 

をエラーではありませんが動作している場合、コントローラには、私は

$scope.saveNewUser = function() 
        $scope.isDisabled = true; 

を使用していましたIEとFirefoxでは正常ですが、Chromeでは動作しません。
私はChromeでフォームを開いていますが、フォームがまだ送信されていないにもかかわらず、IEとFirefoxで無効になっているボタンが表示されていません。

ありがとうございました。

Answer 1

私はCodepenを使って基本的な例を設定し、Firefox、Safari、MacのChromeで動作させています。

コントローラー：

var app = angular.module('app', []); 
app.controller('myctrl', ['$scope', function($scope){ 
    var genderError = false; 
    var stateError = false; 
    var dobError = false; 

    $scope.saveNewUser = function() { 
    $scope.isDisabled = true; 

    if(genderError || stateError || dobError) { 
     $scope.isDisabled = false; 
    } 
    } 
}]); 

はHTML：

<form name="signup"> 
    <button type="submit" class="btn" ng-disabled="signup.$invalid || isDisabled" ng-click="saveNewUser()">Submit</button> 
</form> 

私はあなたのエラーはおそらく、ボタンにdata-ng-disabledとng-disabledの両方を参照したと信じています。ブラウザはこれをさまざまな方法で解釈できます。代わりに、私はng-disabled="signup.$invalid || isDisabled"のような単一の属性になるようにそれらをボタン上にまとめました。

WORKING EXAMPLE