角，NG的消息角材质设计对话框（MD-对话）内不显示 [英] Angular, ng-messages not showing inside angular material design dialog (md-dialog)
本文介绍了角，NG的消息角材质设计对话框（MD-对话）内不显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我工作在窗体上添加在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; DIV NG的消息=。form.card_number $错误＆GT;
＆LT; DIV NG消息=cardNumber＆GT;测试消息＆LT; / DIV＆GT;
＆LT; DIV NG消息=需要＆GT;测试消息2'; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / MD-输入容器＆GT;
...
＆LT; /表及GT;
＆LT; / MD-对话框的内容＆GT;
＆LT; DIV 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）;
}
}
}
和结果，你可以看到无效的领域，但没有错误信息的截图：
![](\"http://i.stack.imgur.com/4vZUF.png\")
解决方案
我是能够使这项工作。
- 添加角消息的亭子和指数
- 模块ngMessages添加到您的应用程序
- 在一个MD-输入容器这么做
＆LT; MD-输入容器柔性MD-是错误=signupForm.emailAddress $无效和放大器;＆安培; （signupForm提交|| signupForm.emailAddress $ $脏。）＆GT;
＆LT;标签＆gt;电子邮件编辑部地址＆LT; /标签＆gt;
＆LT;输入名称=EMAILADDRESSNG模型=registerInfo.emailAddress类型=必需的电子邮件/＆GT;
＆LT; DIV NG的消息=。signupForm.emailAddress $错误NG-IF ='signupForm提交$ ||。 。signupForm.emailAddress $感动'＆GT;
＆LT; DIV NG消息=需要＆gt;这是必需的＆LT; / DIV＆GT;
＆LT; DIV NG消息=电子邮件方式＆gt;输入有效电子邮件地址和LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / MD-输入容器＆GT;
而对于我这样一个自定义指令
＆LT; DIV NG的消息=。signupForm.verify $错误NG-IF ='$ signupForm.verify脏|| 。signupForm.verify $感动'＆GT;
＆LT; DIV NG消息=需要＆gt;这是必需的＆LT; / DIV＆GT;
＆LT; DIV NG消息=passwordVerify＆GT;不匹配＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
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.
- Add Angular Messages to the bower and index
- Add the Module ngMessages to your app
- On a md-input-container did this
<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>
这篇关于角，NG的消息角材质设计对话框（MD-对话）内不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
