web-dev-qa-db-ja.com

ngMessagesを使用してカスタムディレクティブを検証します

私はangularjsでWebアプリを作成し、 angular material （それが質問に関連するかどうかはわかりません）および ngMessages を使用して、無効な入力に対するフィードバックをユーザーに提供します。

通常、提供されたディレクティブの検証では、次のような方法で検証できます。

<md-input-container>
    <input required name="myInput" ng-model="someModel">
    <div ng-messages="formName.myInput.$error">
        <div ng-message="required">This field is required.</div>
    </div> 
</md-input-container>

しかし、独自のカスタムディレクティブを作成した場合...

moduleName.directive('ngCustomdir', function(){
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function($scope, $element, $attrs, ngModel){
            //do some validation
            return validation; //<--true or false based on validation
        }
    };
}

そしてそれを私の入力に含めてください...

<input required ng-customdir name="myInput" ng-model="someModel">

カスタムディレクティブの検証に基づいて入力が無効な場合、フィールドが赤に変わり、$ invalid値がtrueに設定されるため、入力が検証されることはわかっていますが、いつに基づいてngMessagesでメッセージを表示するかがわかりません。これが起こります。

<div ng-messages="formName.myInput.$error">
    <div ng-message="required">This field is required.</div>
    <div ng-message="customdir">This is what I need to appear.</div>
</div>

カスタムディレクティブの検証が無効な場合、メッセージが表示されないようです。どうすればよいですか？事前に助けてくれてありがとう。

javascripthtmlangularjsvalidationng-messages
15
northsideknight

非常に近づいています。link関数に検証を追加するだけです。

link: function($scope, $element, $attrs, ngModel){
        ngModel.$validators.required = function(modelValue) {
              //true or false based on required validation
        };

        ngModel.$validators.customdir= function(modelValue) {
              //true or false based on custome dir validation
        };
    }

モデルが変更されると、AngularJSは$validatorsオブジェクト内のすべての検証関数を呼び出します。関数名に基づいてngメッセージが表示されます。 $ validatorsに関する詳細情報：

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

http://blog.thoughtram.io/angularjs/2015/01/11/exploring-angular-1.3-validators-pipeline.html

21
Huy Hoang Pham

Huyのソリューションに代わるよりコンパクトな方法があります。

link: function($scope, $element, $attrs, ngModel){
    //validation true or false
    ngModel.$setValidity('required',validation);

    ngModel.$setValidity('customdir',validation);
}
2
Adam Bubela