AngularJSフォームの検証：submitをクリックした後、チェックボックスにエラーメッセージを表示

Question

AngularJSを使用すると、チェックボックスがオフの場合、送信ボタンをクリックした後、チェックボックスにエラーメッセージが表示されます。

私はこの試みた：

<form action="/" method="post" name="myForm" novalidate> 
    <label> 
     <input type="checkbox" name="myCheckbox" ng-model="myCheckbox" value="1" required> 
    </label> 
    <p class="error" ng-show="myForm.$submitted && myForm.myCheckbox.$error.required">Error message</p> 
    <button type="submit" ng-disabled="myForm.$invalid">Submit</button> 
</form> 

をしかし、それは動作しませんでした。送信ボタンをクリックすると、何も起こっていません。フォームタグで "novalidate"を削除するか、送信ボタンで "ng-disabled"を選択すると、チェックボックスがオフになっていてもフォームが送信されます。

お願いします。

Answer 1

送信ボタンにng-disabled="myForm.$invalid"があるため、myForm.$submittedが偽であるため、ng-show="myForm.$submitted && myForm.myCheckbox.$error.required"の条件が満たされないため、送信イベントは発生しません（フォームが無効なときにボタンが無効になるため）。

編集：

ここでいくつかの他のユーザーが提案してきたように、私はあなたが今の事をやっている方法を変更した場合、あなたの最善の策は、と思います。私は（非常に似ている）、トウソリューションに考えることができますが、彼らは要求「角度の道」

• は、ソリューション1送信することを含む：

は、あなたがこのような角度での提出を形成するハンドルを：フォームでこのような何かを（入れ

は私がaction="/" method="post"一部を削除したことに注意してください：

<form ng-submit="onSubmit(myForm)" name="myForm" novalidate> 

を

を入力し、送信ボタンからng-disabled="myForm.$invalid"を削除してください。そして、それはこの<button type="submit">Submit</button>

ようになる...とコントローラで

$scope.onSubmit = function(form){ 
    if(form.$invalid){ 
     //... do your call to backend here as you like since the call directly from the form was removed 
    } 
} 

• 解決方法2：

は、同様に、このようにフォームを変更：<form name="myForm" novalidate>

...送信ボタンを次のように変更してください：<button type="submit" ng-click="onSubmit(myForm)">Submit</button>

...そして、フォームが送信される前に

$scope.onSubmit = function(form){ 
     if(form.$invalid){ 
      //... do your call to backend here as you like since the call directly from the form was removed 
     } 
    } 

あなたはこの

ng-show="myForm.myCheckbox.$error.required"

のようにあなたの状態を変更する必要がありそうでない場合が、これは、メッセージが表示されますコントローラで宣言され、同じ機能を使用し

Answer 2

myForm.$submittedを削除しないでください（Asiel Lealが言及したように）、あなたはsubmit buにng-disabledトンは、とても安全です。

<form action="/" method="post" name="myForm" novalidate> 
    <label> 
     <input type="checkbox" name="myCheckbox" ng-model="myCheckbox" value="1" required> 
    </label> 
    <p class="error" ng-show="myForm.$dirty && myForm.myCheckbox.$error.required">Error message</p> 
    <button type="submit" ng-disabled="myForm.$invalid">Submit</button> 
    </form> 

Answer 3

この作業例を試してみてください。

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

 
app.controller('myController',function($scope) { 
 
    $scope.validate = function() { 
 
    alert('submitting..'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app= "myApp" ng-controller="myController"> 
 
    <form name="myForm" ng-submit="myForm.$valid && validate()" novalidate> 
 
       <input type="checkbox" name="checkb" ng-model="formData.checkb" required/> 
 
       <span ng-show="submitted == true && myForm.checkb.$error.required">Please select the checkbox to proceed.</span> 
 
     <input type="submit" value="Submit" ng-click="submitted = true"/> 
 
    </form> 
 
</div>