AngularJSのテキストボックスを検証する方法

Question

テキストボックスを検証する必要があります。私はng-required = "true"を使用していますが、必須メッセージを表示していません。保存ボタンをクリックすると、save（）関数に直接置き換えられます。それを避ける方法。

<div ng-app="LearnApp" ng-controller="csrControl"> 
    <table> 
     <tr> 
      <td> 
       Name 
      </td> 
      <td> 
       : 
      </td> 
      <td> 
       <input id="txtName" type="text" ng-model="txtName" ng-required="true" placeholder="Name" /> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       Address 
      </td> 
      <td> 
       : 
      </td> 
      <td> 
       <input id="txtAddress" type="text" ng-model="txtAddress" ng-required="true" placeholder="Address" /> 
      </td> 
     </tr> 
     <tr> 
      <td colspan="3" align="right"> 
       <input id="btnSave" type="button" value="Save" class="button" ng-click="save()" /> 
       <input id="btnCancel" type="button" value="Cancel" class="button" /> 
      </td> 
     </tr> 
    </table> 
</div> 
<script type="text/javascript"> 
    var app = angular.module("LearnApp", []); 
    app.controller("csrControl", function ($scope, $http) { 

     $scope.save = function() { 

     }; 

    }); 
</script> 

Answer 1

私はあなたがフォームタグを見逃したと思います。

<form name="myForm" > 
    .... 
</form> 

Answer 2

フォームタグを追加してフォームに名前を付ける必要があります。などのエラーメッセージのために、この名前を使用します。

<form name="myForm" novalidate> 

    //some code 

    <input type="text" ng-model="abc" name="txt1" ng-required="true"/> 
     <div ng-messages="myForm.txt1.$error"> 
      <div ng-message="required"> This is Required! </div>          
     </div> 
</form> 

も前にフォームを検証保存するために、サーバー側の条件を入れて：

$scope.Save = function() { 
      if ($scope.myForm.$valid) { 

      //perform save 

      } 
    }; 

Answer 3

使用はフォームタグと呼ぶをNG-提出あなたのフォームが有効な場合に提供される関数、またはデフォルトのhtml5検証エラーをスローします。 「必須」の属性を使用すると、入力が必要になります。 ng-requiredディレクティブに割り当てることができる式を評価する必要がある場合は、ng-requiredを使用します。

特定のタイプのエラーメッセージを表示し、デフォルトのhtml5検証を行わない場合は、novalidateディレクティブをフォームタグに使用できます。 角型検証の詳細については、公式documentationとtutorialが役立ちます。

以下のコードの変更を確認してください。

<form ng-submit="save()"> 
    <table> 
    <tr> 
     <td> 
      Name 
     </td> 
     <td> 
      : 
     </td> 
     <td> 
      <input id="txtName" type="text" ng-model="txtName" required placeholder="Name" /> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="3" align="right"> 
      <input id="btnSave" type="submit" value="Save" class="button"/> 
      <input id="btnCancel" type="button" value="Cancel" class="button" /> 
     </td> 
    </tr> 
</form>