エラーメッセージが角フォーム検証

Question

後に非表示にしていません、私がヒットした場合、フォームは、エラーメッセージを持っていない最初はこれが私のHTML

 <form id = "myform" name="myform" ng-submit="saveForm()" novalidate > 

      <div class="input-group"> 
       <span class="input-group-addon"> <img src="/icon.png" alt=""/> </span>      
       <input type="text" class="form-control" id="username" name="username" ng-model="username" placeholder="Username" autofocus required>      
      </div> 
      <span ng-show="formInvalid">Please enter username</span> 


      <button type="submit" class="btn btn-default" id="saveBtn"> Save </button> 
     </form> 

私の一形態であると、コントローラ内部で、私は

$scope.formInvalid = false; 

$scope.saveForm = function(){ 
    if($scope.myform.username.$invalid){ 
     $scope.formInvalid = true; 
    } 

if($scope.myform.$valid){ 
//....save it.... 

を持っています「保存してください」と入力してください。「ユーザー名を入力してください」と表示されています。

フォームフィールドをクリックしてユーザー名を入力すると、エラーメッセージは表示されません。入力して別の場所をクリックしても、エラーメッセージは表示されません。

私も

if(!$scope.myform.username.$valid){ 
     $scope.formInvalid = true; 
    } 

を試してみて、私はまた、

一緒

if(!$scope.myform.username.$valid){ 
     $scope.formInvalid = true; 
    } 

    if($scope.myform.username.$valid){ 
     $scope.formInvalid = false; 
    } 

を試してみて、問題がまだそこにあります。どうすればデバッグできますか？これをどうやって解決するのですか？

おかげ

Answer 1

あなたは監視イベント、

$scope.$watch('myform.$valid', function(n, o) { 
if(n) { 
$scope.formInvalid = false; 
} else { 
$scope.formInvalid = true; 
} 
}); 

を試すことができます。しかし、あなたがバリデータを使用して起動した場合私も、良いアイデアかもしれません。

Answer 2

あなたは無効なプロパティをどこにでも形成するようなトリガはしません。バリデータとng-messagesモジュールに組み込まれた角度でこの問題を解決することをお勧めします。有効または無効であり、警告テキストを通知します。 もう1つのアプローチは、入力の有効性に応じて、変更をリッスンし、フォームの無効なプロパティをトリガーおよび更新する入力に対して、ng-changeディレクティブを使用することです。

例：（公式ウェブサイト角度から撮影）

<form name="myForm"> 
    <label> 
    Enter your name: 
    <input type="text" 
      name="myName" 
      ng-model="name" 
      ng-minlength="5" 
      ng-maxlength="20" 
      required /> 
    </label> 
    <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre> 

    <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
    </div> 
</form> 

私は、これはそれを行うための最もエレガントな方法だと思います。

Answer 3

フォームの状態を管理するための新しい変数（$scope.formInvalid）を導入して維持する必要はありません。 Angularは、フォームの有効/無効状態を維持します。フォームがmyform命名されたよう

、ちょうどmyform.username.$invalidの値に基づいて、ユーザ名についてのメッセージを表示し、myform.$validは真である場合にのみ、フォームを保存：

HTML

<span ng-show="myform.username.$invalid">Please enter username</span> 

JS

$scope.saveForm = function() { 
    if ($scope.myform.$valid) { 
    // save the form 
    } 
}; 

fiddle