Angulaire, Ng-Messages n'apparaît pas dans la boîte de dialogue de conception de matériau angulaire (boîte de dialogue MD)

Je travaille sur un formulaire pour ajouter une carte de crédit en angularjs, avec un matériau angulaire ( https: //material.angularjs.org/latest/#/ ).

Pour tous mes autres formulaires, j'ai utilisé NG-Messages ( https://docs.angularjs.org/api/ngmessages/directive/ngMessages ) Pour afficher des erreurs de validation, et cela a fonctionné bien. P>

Lorsque j'embroude la forme dans une boîte de dialogue MD, mes messages NG ne s'affichent pas, l'entrée est devenue invalide, mais aucune erreur affichée. J'ai le problème avec la directive de validation de base et la directive de validation personnalisée. P>

My Modèle de dialogue: P>

angular
    .module('app.core')
    .directive("cardNumber", cardNumber);

/* @ngInject */
function cardNumber () {
    var directive = {
        link: link,
        restrict: 'A',
        require : "ngModel"
    };
    return directive;

    function link(scope, element, attrs, ngModel) {
        ngModel.$validators.cardNumber = cardNumber;

        scope.$watch("cardNumber", function(){
            ngModel.$validate();
        });

        // Validate visa, mastercard, amex, concate new regex to validate more card
        var reg = new RegExp(/^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13})$/);

        function cardNumber(modelValue){
            if(!modelValue){
                return true;
            }

            modelValue = modelValue
                            .replace(/-/g, "")
                            .replace(/\s/g, "")
                            .replace(/,/g, "");

            return reg.test(modelValue);
        }
    }
}