どうすればangularjsでフォームの有効性を確認できますか？

Question 1

私はangularjsを初めて使用します。私のアプリにフォームがあるとしましょう。インスペクターを使用して、angularjsがフォームが無効であると判断した場合、フォームにng-invalidクラスが追加されることに気付きました。美しい。

したがって、フォームが有効かどうかを確認するには、Jqueryセレクターでコードを汚染する必要があるようです。フォームコントローラーを使用せずにフォームの有効性を示すangularjsの方法は何ですか？

Question 2

<form>ngApp内にタグを配置すると、AngularJSはフォームコントローラーを自動的に追加します（実際には、必須のform動作を追加するというディレクティブがあります）。name属性の値はスコープにバインドされます。したがって、次のようなもの<form name="yourformname">...</form>が満たされます。

フォームはFormControllerのインスタンスです。フォームインスタンスは、オプションで、name属性を使用してスコープに公開できます。

したがって、フォームの有効性を確認するに$scope.yourformname.$validは、スコープのプロパティの値を確認します。

フォームに関する詳細については、開発者ガイドのセクションをご覧ください。

Question 3

例

<div ng-controller="ExampleController">
  <form name="myform">
   Name: <input type="text" ng-model="user.name" /><br>
   Email: <input type="email" ng-model="user.email" /><br>
  </form>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

     //if form is not valid then return the form.
     if(!$scope.myform.$valid) {
       return;
     }
  }]);
</script>

Question 4

使用することもできます myform.$invalid

例えば

if($scope.myform.$invalid){return;}

Question 5

形

FormControllerをインスタンス化するモジュールngディレクティブのディレクティブ。

name属性が指定されている場合、フォームコントローラーはこの名前で現在のスコープに公開されます。

エイリアス：ngForm

Angularでは、フォームをネストできます。これは、すべての子フォームも有効な場合に、外部フォームが有効であることを意味します。ただし、ブラウザーでは要素のネストが許可されていないため、Angularは、同じように動作するがネストできるngFormディレクティブを提供します。これにより、ネストされたフォームを作成できます。これは、ngRepeatディレクティブを使用して動的に生成されるフォームでAngular検証ディレクティブを使用する場合に非常に便利です。補間を使用して入力要素のname属性を動的に生成することはできないため、繰り返される入力の各セットをngFormディレクティブでラップし、これらを外部フォーム要素にネストする必要があります。

CSSクラス

フォームが有効な場合はng-validが設定されます。

フォームが無効な場合、ng-invalidが設定されます。

フォームが元の状態の場合、ng-pristineが設定されます。

フォームがダーティの場合、ng-dirtyが設定されます。

フォームが送信された場合、ng-submittedが設定されます。

ngAnimateは、追加および削除されたときにこれらの各クラスを検出できることに注意してください。

フォームを送信し、デフォルトのアクションを防止する

クライアント側のAngularアプリケーションでのフォームの役割は、従来のラウンドトリップアプリとは異なるため、ブラウザーは、フォームの送信を、サーバーにデータを送信するページ全体のリロードに変換しないことが望ましいです。代わりに、アプリケーション固有の方法でフォームの送信を処理するために、一部のJavaScriptロジックをトリガーする必要があります。

このため、要素にaction属性が指定されていない限り、Angularはデフォルトのアクション（サーバーへのフォーム送信）を防ぎます。

次の2つの方法のいずれかを使用して、フォームの送信時に呼び出すJavaScriptメソッドを指定できます。

フォーム要素のngSubmitディレクティブ

送信タイプの最初のボタンまたは入力フィールドのngClickディレクティブ（input [type = submit]）

ハンドラーの二重実行を防ぐには、ngSubmitまたはngClickディレクティブのいずれか1つのみを使用してください。

これは、HTML仕様に次のフォーム送信ルールがあるためです。

フォームに入力フィールドが1つしかない場合、このフィールドにEnterキーを押すと、フォームに2つ以上の入力フィールドがあり、ボタンがない場合にフォーム送信（ngSubmit）がトリガーされます。またはinput[type=submit]、フォームに1つ以上の入力フィールドがあり、Enterキーを押すと、送信がトリガーされません。 1つ以上のボタンを押すかinput[type=submit]、入力フィールドのいずれかでEnterキーを押すと、最初のボタンまたはinput[type=submit]（ngClick）でクリックハンドラーがトリガーされ、囲んでいるフォーム（ngSubmit）で送信ハンドラーがトリガーされます。

保留中のngModelOptionsの変更は、同封のフォームが送信されるとすぐに行われます。ngClickイベントは、モデルが更新される前に発生することに注意してください。

ngSubmitを使用して、更新されたモデルにアクセスします。

app.js：

angular.module('formExample', [])
  .controller('FormController', ['$scope', function($scope) {
    $scope.userType = 'guest';
  }]);

フォーム：

<form name="myForm" ng-controller="FormController" class="my-form">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span>
  userType = {{userType}}
  myForm.input.$valid = {{myForm.input.$valid}}
  myForm.input.$error = {{myForm.input.$error}}
  myForm.$valid = {{myForm.$valid}}
  myForm.$error.required = {{!!myForm.$error.required}}
 </form>

ソース：AngularJS：API：フォーム