Angularjs +を無効にすると、私はこのようなサンプルコードを持っているボタン

を提出有効にする：Angularjs +を無効にすると、私はこのようなサンプルコードを持っているボタン

HTMLコード：

<body ng-controller="MainCtrl"> 
    <form name="myForm"> 
     <input name="myText" type="text" name="test" ng-model="mytext" required /> 
     <button ng-click="save()" ng-disabled="myForm.$invalid">Save</button> 
    </form> 
    </body>

JSコード：Click Here

：このリンクのコードを添付

var app = angular.module('angularjs-starter', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 

    $scope.save = function(){ 
    //logic or http method 
    console.log("Test"); 
    } 
});

を

ロジック：

デフォルトの保存ボタンが無効です。
フォームに入力したら、ボタンを有効にします。
保存した後、もう一度[保存]ボタンを無効にします。
再度、ユーザーはテキストを入力して保存ボタンを有効にする必要があります。

注：入力は1つだけですが、複数の入力フィールドがあります。また、保存機能では、ロジックデータをデータベースに保存しました。

フォームに何らかの変更があったかどうかを確認だけにして、ボタンを有効にするために $pristineを使用することができます

出典

2016-12-18 RSKMR

あなたの質問は正確ですか？ –

フォームが汚れていて、それが簡単かどうか（myForm。$ dirty）をチェックしてから、save（）関数でフォームを初期化するようにしましたが、$ scopeは物事を混乱させるので、チェックする必要がありますこの投稿：http://stackoverflow.com/questions/27191744/setpristine-not-working –

：

<body ng-controller="MainCtrl"> 
    <form name="myForm"> 
     <input name="myText" type="text" name="test" ng-model="mytext" required /> 
     <button ng-click="save(myForm)" ng-disabled="myForm.$invalid || myForm.$pristine">Save</button> 
    </form> 
</body>

$pristineがng-disabledで使用されている様子がわかります。この場合、ボタンには

ng-disabled="myForm.$invalid || myForm.$pristine"

をフォームが無効である場合、またはフォームに変更がない場合は無効になります。

この方法を使用する場合は、データを保存した後にフォームを初期化する必要があります。メソッドにフォームを渡すために使用されたフォームパラメータがあることを

$scope.save = function(myForm) { 
    // set form to pristine 
    myForm.$setPristine(); 
}

注意：あなたは、メソッド$setPristineを使用することができます。 HTMLであなたもng-clickの一環として、このパラメータを渡す必要があります。

ng-click="save(myForm)"

ここdocumentation of FormControllerをチェックしてください詳細についてはJSFiddle that demonstrates the functionality

です。

出典

2016-12-18 13:52:04 dotnetom

ありがとうございます。その作業は – RSKMR

フォームが無効な場合、送信ボタンを無効にしました。

必須フィールドが空白のときはいつでも、フォームは無効になり、ボタンは無効になります。フォームに必要なすべての入力値があるとすぐに、送信ボタンが有効になります。

保存が完了した、つまりhttpリクエストの成功コールバックでモデル変数をリセットした後、必要な入力のすべてのモーダル変数をリセットする必要があります。

出典

2016-12-18 13:54:56 Deep

-1

ここで私はそれを行う方法ですが、別のトラッキング変数を追加します。このようなもの。

$scope.btnStatus = true; 
    $scope.save = function(){ 
    //logic or http method 
    $scope.btnStatus = false; 
    console.log("Test"); 
    } 
    $scope.onChange = function(){ 

    if($scope.btnStatus == false) 
     $scope.btnStatus = true; 
    }

とhtmlはこのようになります。

<form name="myForm"> 
    <input name="myText" type="text" name="test" ng-change="onChange()" ng-model="mytext" required /> 
    <button ng-click="save()" ng-disabled="myForm.$invalid || !btnStatus">Save</button> 
</form>

ここには、コードに基づいたcodeがあります。

出典

2016-12-18 14:02:02 Miqe

$ pristineを使用してより良いです、より多くの変数や機能の必要はありません –

@ JohanBlomgrenそれだけで良い方法があるので、私は下の投票に値するというわけではありません。とにかくありがとう – Miqe

Angularjs +を無効にすると、私はこのようなサンプルコードを持っているボタン

答えて

関連する問題