我工作在窗体上添加在angularJS信用卡,具有角料(的https: //material.angularjs.org/latest/#/ )。
有关我的一切其他形式的,我用NG的消息( https://开头的文档。 angularjs.org/api/ngMessages/directive/ngMessages )来显示验证错误和它工作得很好。
当我embded一个MD-对话框里面的形式,我的NG-消息不显示,输入变得无效,但不会显示任何错误。我有基本的验证指令,并自定义的验证指令的问题。
我的对话框模板:
< MD-对话框>< MD-对话框的内容风格=最大宽度:800像素;最大高度:810像素;> < H2的i18n =add_card_button>< / H> <表格名称=形式> < MD-输入容器> <标签的i18n =CARD_NUMBER>< /标签> <输入名称=CARD_NUMBER TYPE =文本 NG-模式=ctrl.newCard.cc_number 类=MD-输入 需要 卡号码> < DIV NG的消息=。form.card_number $错误> < DIV NG消息=cardNumber>测试消息< / DIV> < DIV NG消息=需要>测试消息2'; / DIV> < / DIV> < / MD-输入容器> ... < /表及GT;< / MD-对话框的内容>< DIV CLASS =MD-行动布局=行> < MD-NG按钮,点击=> <国际化> ok_button< / i18n的> < / MD-按钮> < MD-NG按钮,点击=取消()的风格=保证金右:20像素;> <国际化>&CANCEL_BUTTON LT; / i18n的> < / MD-按钮>< / DIV>
我的对话框中定义:
$ 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); } }}
和结果,你可以看到无效的领域,但没有错误信息的截图:
解决方案我是能够使这项工作。
添加角消息的亭子和指数模块ngMessages添加到您的应用程序在一个MD-输入容器这么做< MD-输入容器柔性MD-是错误=signupForm.emailAddress $无效和放大器;&安培; (signupForm提交|| signupForm.emailAddress $ $脏。)> <标签>电子邮件编辑部地址< /标签> <输入名称=EMAILADDRESSNG模型=registerInfo.emailAddress类型=必需的电子邮件/> < DIV NG的消息=。signupForm.emailAddress $错误NG-IF ='signupForm提交$ ||。 。signupForm.emailAddress $感动'> < DIV NG消息=需要>这是必需的< / DIV> < DIV NG消息=电子邮件方式>输入有效电子邮件地址和LT; / DIV> < / DIV>< / MD-输入容器>
而对于我这样一个自定义指令
< DIV NG的消息=。signupForm.verify $错误NG-IF ='$ signupForm.verify脏|| 。signupForm.verify $感动'> < DIV NG消息=需要>这是必需的< / DIV> < DIV NG消息=passwordVerify>不匹配< / DIV>< / DIV>
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>
相关推荐
最新文章