3

いくつかのフォームで使用され、フィールドの複数の側面をチェックする非同期 Formly フィールド検証関数があります。フィールドの何が問題なのかを正確に説明するフィールド検証関数から、(一般的な意味で) エラー テキストを "返す" ことができるようにしたいと考えています。

それを行う最善の方法は何ですか？テキストをスコープに出力したいと思いますが、どこにあるのかわかりません。私はすべての例を掘り下げましたが（私はそう思います）、関連するものは何も見当たりません。

4

2 に答える 2

4

formlyValidationMessagesと fieldWrapper を組み合わせてこれを行います。初期設定は非常に困難ですが、同期と非同期の検証エラーを同じように処理できる非常に柔軟な検証システムが得られます。この投稿の大部分は、公式のasync Validation exampleからまとめたものです。

formlyValidationMessages を使用すると、一般的な検証エラーのデフォルトのエラー メッセージを構成できます。これが私のプロジェクトで使用する例です

angular.module('myModule', ['formly']).run(formlyValidationMessages){
    formlyValidationMessages.messages.required = 'to.label + " is required"'
    formlyValidationMessages.messages.max = '"The max value allowed is " + to.max'
    formlyValidationMessages.messages.min = '"The min value allowed is " + to.min'        
}

これらはFormly Expressionsであるため、文字列または関数にすることができます。

これは基本的に、角度形式のフィールド エラー プロパティに監視を設定します。フィールドのフォームにエラーがある場合 (例: form.field.$error.required === true)、フィールド構成オブジェクトの validation.messages に max が追加されます。

特定のフィールドに特定のエラーが必要な場合は、それをフィールド定義に追加できます。例えば

var field = {
    key: 'serialNumber',
    type: 'input'
    ....
    validation: {
      messages: {
        unique: function() {
          return 'Serial number 123 is not unique'
        }
      }
    }
    asyncValidators: {
      unique: {
          expression: function(modelValue, viewValue, scope) {
            return $timeout(
              function(){
                if(modelValue === '123') {
                  throw 'unique failure: 123'  //throw to reject promise
                }
              },
              1000
            )
          }
      }
    }
}

これをユーザーに表示するには、ngMessages を使用してフィールドのフィールドごとのエラー リストを作成するフィールドの hasError ラッパーを作成します。

module.config(function(formlyConfigProvider) {
  formlyConfigProvider.setWrapper({
    name: 'hasError',
    template: '<div class="form-group" ng-class="{\'has-error\': showError}">' +
      '  <label class="control-label" for="{{id}}">{{to.label}}</label>' +
      '  <formly-transclude></formly-transclude>' +
      '  <div ng-messages="fc.$error" ng-if="showError" class="text-danger">' +
      '    <div ng-message="{{ ::name }}" ng-repeat="(name, message) in ::options.validation.messages" class="message">{{ message(fc.$viewValue)}}</div>' +
      '  </div>' +
      '</div>'
  })
})

これは、ブートストラップ スタイリングを使用した機能的な例を持つplunkerです。123 を入力すると非同期の検証エラーが発生しますが、空白のままにすると同期の検証エラーが発生します。

于 2016-05-06T04:23:25.563 に答える
0

Angular はカスタム検証の使用をサポートしているため、たとえば、ユーザー名の一意性を確認したい場合は、これを行うための独自のディレクティブを作成できます。

この例のように: https://docs.angularjs.org/guide/forms

一意性のチェックを使用してディレクティブを作成し、ディレクティブがトリガーされているかどうかを確認しng-show、必要な場合にのみ表示するために使用します。

<span ng-show="form.name.$error.username">This username is already taken!</span>

于 2015-09-30T20:39:08.217 に答える