82

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

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

4

4 に答える 4

150

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

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

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

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

于 2013-01-13T02:25:04.930 に答える
36

例

<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>
于 2014-10-01T10:18:53.990 に答える
12

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

例えば

if($scope.myform.$invalid){return;}
于 2015-09-26T18:20:50.390 に答える
6

形

  • 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 つしかない場合、フォームに 2 つ以上の入力フィールドがありボタンがない場合、このフィールドで Enter キーを押すとフォーム送信 (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: フォーム

于 2015-05-05T17:04:04.253 に答える