我工作在窗体上添加在angularJS信用卡，具有角料（的https： //material.angularjs.org/latest/#/ ）。

有关我的一切其他形式的，我用NG的消息（ https：//开头的文档。 angularjs.org/api/ngMessages/directive/ngMessages ）来显示验证错误和它工作得很好。

当我embded一个MD-对话框里面的形式，我的NG-消息不显示，输入变得无效，但不会显示任何错误。我有基本的验证指令，并自定义的验证指令的问题。

我的对话框模板：

 ＆LT; MD-对话框＆GT;＆LT; MD-对话框的内容风格=最大宽度：800像素;最大高度：810像素;＆GT;    ＆LT; H2的i18n =add_card_button＆GT;＆LT; / H＆GT;    ＆LT;表格名称=形式＆GT;        ＆LT; MD-输入容器＆GT;            ＆LT;标签的i18n =CARD_NUMBER＆GT;＆LT; /标签＆gt;            ＆LT;输入名称=CARD_NUMBER                    TYPE =文本                    NG-模式=ctrl.newCard.cc_number                    类=MD-输入                    需要                    卡号码＆GT;            ＆LT; D​​IV NG的消息=。form.card_number $错误＆GT;                ＆LT; D​​IV NG消息=cardNumber＆GT;测试消息＆LT; / DIV＆GT;                ＆LT; D​​IV NG消息=需要＆GT;测试消息2'; / DIV＆GT;            ＆LT; / DIV＆GT;        ＆LT; / MD-输入容器＆GT;        ...    ＆LT; /表及GT;＆LT; / MD-对话框的内容＆GT;＆LT; D​​IV CLASS =MD-行动布局=行＆GT;    ＆LT; MD-NG按钮，点击=＆GT;        ＆LT;国际化＆GT; ok_button＆LT; / i18n的＆GT;    ＆LT; / MD-按钮＆GT;    ＆LT; MD-NG按钮，点击=取消（）的风格=保证金右：20像素;＆GT;        ＆LT;国际化＆GT;＆CANCEL_BUTTON LT; / i18n的＆GT;    ＆LT; / MD-按钮＆GT;＆LT; / DIV＆GT; 

我的对话框中定义：

  $ mdDialog.show（{            控制器：dialogController，            controllerAs：CTRL            bindToController：真实，            templateUrl：creditCards /资产/模板/ add_credit_card_dialog.html            父：angular.element（document.body的）            targetEvent：事件，            clickOutsiteToClose：真实，            当地人：{                cardTypes：vm.cardTypes            }        }）; 

和我的自定义指令定义

 角    .module（'app.core'）    .directive（cardNumber，cardNumber）;/ * * @ngInject /功能cardNumber（）{    var命令= {        链接：链接，        限制：'A'，        要求：ngModel    };    返回指令;    功能链接（范围，元素，ATTRS，ngModel）{        ngModel $ validators.cardNumber = cardNumber。        范围。$表（cardNumber功能（）{            ngModel $的validate（）。        }）;        //验证Visa，万事达卡，美国运通卡，concate新的正则表达式来验证多卡        VAR章=新的RegExp（/ ^（？：4 [0-9] {12}（？：？[0-9] {3}）| 5 [1-5] [0-9] {14} | 3 [47] [0-9] {13}）$ /）;        功能cardNumber（modelValue）{            如果（！modelValue）{                返回true;            }            modelValue = modelValue                            .replace（/  -  / g的，）                            .replace（/ \\ s /克，）                            .replace（/，/克，）;            返回reg.test（modelValue）;        }    }} 

和结果，你可以看到无效的领域，但没有错误信息的截图：

我是能够使这项工作。

而对于我这样一个自定义指令

I'm working on a form to add a credit card in angularJS, with angular material (https://material.angularjs.org/latest/#/).

For all my other forms, i used ng-messages (https://docs.angularjs.org/api/ngMessages/directive/ngMessages) to show validation errors, and it worked fine.

When i embded the form inside a md-dialog, my ng-messages are not displaying, the input became invalid, but no error displayed. I've got the problem with basic validation directive and custom validation directive.

My dialog template :

<md-dialog>
<md-dialog-content style="max-width:800px;max-height:810px; ">
    <h2 i18n="add_card_button"></h2>
    <form name="form">
        <md-input-container>
            <label i18n="card_number"></label>
            <input  name="card_number"
                    type="text" 
                    ng-model="ctrl.newCard.cc_number"
                    class="md-input" 
                    required
                    card-number>
            <div ng-messages="form.card_number.$error">
                <div ng-message="cardNumber">test message</div>
                <div ng-message="required">test message 2</div>
            </div>
        </md-input-container>
        ...
    </form>
</md-dialog-content>
<div class="md-actions" layout="row">           
    <md-button ng-click="">
        <i18n>ok_button</i18n>
    </md-button>
    <md-button ng-click="cancel()" style="margin-right:20px;">
        <i18n>cancel_button</i18n>
    </md-button>
</div>

My dialog definition :

$mdDialog.show({
            controller : dialogController,
            controllerAs : "ctrl",
            bindToController : true,
            templateUrl : "creditCards/assets/templates/add_credit_card_dialog.html",
            parent : angular.element(document.body),
            targetEvent : event,
            clickOutsiteToClose : true,
            locals : {
                cardTypes : vm.cardTypes
            }
        });

and my custom directive definition

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);
        }
    }
}

And a screenshot of the result where you can see the invalid field but no error message :

I was able to make this work.

<md-input-container flex md-is-error="signupForm.emailAddress.$invalid && (signupForm.$submitted || signupForm.emailAddress.$dirty)">
  <label>Email Addresss</label>
  <input name="emailAddress" ng-model="registerInfo.emailAddress" type="email" required/>
  <div ng-messages="signupForm.emailAddress.$error" ng-if='signupForm.$submitted || signupForm.emailAddress.$touched'>
    <div ng-message="required">This is required.</div>
    <div ng-message="email">Enter valid email address.</div>
  </div>
</md-input-container>

And for a custom directive I did this

<div ng-messages="signupForm.verify.$error" ng-if='signupForm.verify.$dirty || signupForm.verify.$touched'>
  <div ng-message="required">This is required.</div>
  <div ng-message="passwordVerify">Doesn't Match.</div>
</div>