1

angular ng-messages を使用して検証メッセージを表示します

次のコードを検討してください。

<ul ng-messages="formToValidate.fieldToValidate.$error" ng-messages-multiple>
    <li ng-message="pattern">Invalid pattern</li>
    <li ng-message="minlength, maxlength">Should contain no less than 7 and no more than 100 chars</li>
    <li ng-message="!pattern && !minlength && !maxlength && onlyAfterAllOtherPassedValidation">
        This validation message is shown only when all the other validations have passed and validation  fails on onlyAfterAllOtherPassedValidation
    </li>
</ul>

他のすべての検証に合格し、検証が onlyAfterAllOtherPassedValidation で失敗した場合にのみ、最後の検証メッセージを表示したいと考えています。そして、複雑な条件を ng-message に渡すことがまったく可能かどうかはわかりません。まだ ng-messages を使用できる限り、提案や回避策を歓迎します

4

2 に答える 2

3

メッセージを保持している要素で ng-if を使用できます。

<li ng-if="!formToValidate.fieldToValidate.$error.required && !formToValidate.fieldToValidate.$error.minLength && !formToValidate.fieldToValidate.$error.maxLength" ng-message="onlyAfterAllOtherPassedValidation">
    This validation message is shown only when all the other validations have passed and validation  fails on onlyAfterAllOtherPassedValidation
</li>
于 2016-01-19T13:03:15.307 に答える
0

もちろん、 JonMac1374によって提案されたソリューションは機能します。しかし、この問題を一度解決する方が良いです。ディレクティブuse-form-error に注意することをお勧めします。独自のチェックを構築するのに役立ちます。

jsfiddle のライブ例。

<form name="ExampleForm">
  <label>Password</label>
  <input ng-model="password" name="password" minlength="2" pattern="^\d*$" required use-form-error="onlyAfterAllOtherPassedValidation" use-error-expression="!ExampleForm.password.$error.required && !ExampleForm.password.$error.minlength && !ExampleForm.password.$error.pattern"
  />
  <pre>{{ExampleForm.password.$error|json}}</pre>
  <div ng-messages="ExampleForm.password.$error" ng-messages-multiple="true" class="errors">
    <div ng-message="required">
      Your required is wrong
    </div>
    <div ng-message="pattern">
      Your pattern is wrong
    </div>
    <div ng-message="minlength">
      Your minlength is wrong
    </div>
    <div ng-message="onlyAfterAllOtherPassedValidation">
      Your onlyAfterAllOtherPassedValidation
    </div>
  </div>
</form>
于 2016-02-03T09:37:37.627 に答える