3

私は使用してng-messagesおり、繰り返す必要なく、1 つのコード ブロックで複数のフィールドをチェックできるかどうかを知りたいです。

だから私は持っています：（メモcheckCustomは私が書いたカスタムディレクティブです）

<div ng-messages="registrationForm.field1.$error" ng-if="registrationFormValid">
    <span ng-message="required">please enter field 1</span>
    <span ng-message="checkCustom">please check custom value</span>
</div>

と

<div ng-messages="registrationForm.field2.$error" ng-if="registrationFormValid">
    <span ng-message="required">please enter field 1</span>
    <span ng-message="checkCustom">please check custom value</span>
</div>

しかし、私はむしろ次のようなものを望んでいます:

<div ng-messages="registrationForm.field1.$error || registrationForm.field2.$error" ng-if="registrationFormValid">
    <span ng-message="required">please enter field 1</span>
    <span ng-message="checkCustom">please check custom value</span>
</div>

このようなことは可能ですか？

ありがとう

4

3 に答える 3

4

フォームのコントローラーには、 という便利なプロパティがあります$error。これはオブジェクト ハッシュであり、バリデータが失敗したコントロールまたはフォームへの参照を含みます。キーはエラー名 ( email、required、minlengthなど) であり、値は指定されたエラー名に対して失敗したバリデータを持つコントロールまたはフォームの配列です - source .

これは、このオブジェクトに特定のキー名が含まれているかどうかを調べるだけで、フォーム内のエラーをグローバルにチェックできることを意味します。$error

この例を見てください：

angular.module('myApp', ['ngMessages']);
[ng-cloak] {
  display: none !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">

<div ng-app="myApp" ng-cloak>
  <form name="myForm">
    <div class="form-group">
      <h3>Validation messages:</h3>

      <div ng-messages="myForm.$error" multiple>
        <div ng-message="required" class="alert alert-danger">There's at least one <strong>required</strong> field</div>
        <div ng-message="minlength" class="alert alert-danger">There's at least one field which doesn't fulfill the <strong>minlength</strong> condition</div>
        <div ng-message="email" class="alert alert-danger">The form contains an invalid <strong>email</strong> input</div>
      </div>
    </div>
    <div class="form-group">
      <label>Required Input 1</label>
      <input type="text" ng-model="myModel1" required>
    </div>
    <div class="form-group">
      <label>Required Input 2</label>
      <input type="text" ng-model="myModel2" required>
    </div>
    <div class="form-group">
      <label>Required Input 3 which has min-length="3"</label>
      <input type="text" ng-model="myModel3" required ng-minlength="3">
    </div>
    <div class="form-group">
      <label>Required Input 4 which is type="email"</label>
      <input type="email" ng-model="myModel4" required>
    </div>
  </form>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-messages.min.js"></script>

于 2016-04-03T15:05:44.913 に答える