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 :
There are two possible fixes detailed here: https://github.com/angular/material/issues/8037
Make sure the ng-app directive is on the body tag of your page.
Remove the line parent: angular.element(document.body)
from your $mdDialog.show() options.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With