validation-messages
Version:
Angular 2 module for displaying validation messages on template driven forms
201 lines (194 loc) • 9.02 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@angular/http'), require('rxjs/Rx')) :
typeof define === 'function' && define.amd ? define(['exports', '@angular/core', '@angular/common', '@angular/forms', '@angular/http', 'rxjs/Rx'], factory) :
(factory((global.validationMessages = {}),global.ng.core,global.ng.common,global.ng.forms,global.ng.http,global.rxjs_Rx));
}(this, (function (exports,_angular_core,_angular_common,_angular_forms,_angular_http,rxjs_Rx) { 'use strict';
var MessageConfigService = (function () {
function MessageConfigService(http) {
this.http = http;
}
MessageConfigService.prototype.fetchValidationMessages = function (resourceUrl) {
return this.http.get(resourceUrl).map(function (res) {
return res.json();
}).catch(function (error) { return rxjs_Rx.Observable.throw(error.json().error || 'Server error'); });
};
MessageConfigService.prototype.getMessageforError = function (key, error) {
var validationMessage = this.validationMessages[key] ? this.validationMessages[key] : this.validationMessages['miscellaneous'];
if (typeof error != 'object') {
return validationMessage;
}
else {
//TODO return modified object with customized message
switch (key) {
case 'minlength':
validationMessage.text = validationMessage.text.replace('$DYNAMIC_VALUE', error.requiredLength);
break;
case 'maxlength':
validationMessage.text = validationMessage.text.replace('$DYNAMIC_VALUE', error.requiredLength);
break;
case 'pattern':
validationMessage.text = validationMessage.text.replace('$DYNAMIC_VALUE', error.requiredPattern);
break;
default:
break;
}
return validationMessage;
}
};
MessageConfigService.prototype.getAllMessages = function () {
//providing it via service will avoid creating multiple instances.
return this.validationMessages;
};
return MessageConfigService;
}());
MessageConfigService.decorators = [
{ type: _angular_core.Injectable },
];
/** @nocollapse */
MessageConfigService.ctorParameters = function () { return [
{ type: _angular_http.Http, },
]; };
var ValidationMessagesDirective = (function () {
function ValidationMessagesDirective(elementRef, renderer, model, messageConfigService) {
this.elementRef = elementRef;
this.renderer = renderer;
this.model = model;
this.messageConfigService = messageConfigService;
this.validationMessages = this.messageConfigService.getAllMessages();
var self = this;
//trigger validation message(s) on form submission
this.model.formDirective.ngSubmit.subscribe(function (data) {
self.triggerValidationMessages();
});
//trigger validation message(s) on value changes
this.model.valueChanges.subscribe(function () {
self.triggerValidationMessages();
});
}
ValidationMessagesDirective.prototype.ngOnInit = function () {
var self = this;
setTimeout(function () {
if (self.elementRef.nativeElement.hasAttribute('required')) {
//Add required asterisk class on label
self.renderer.addClass(self.elementRef.nativeElement.previousElementSibling, 'required');
}
}, 200);
};
ValidationMessagesDirective.prototype.onInput = function () {
//trigger validation message(s) on input
this.triggerValidationMessages();
};
ValidationMessagesDirective.prototype.onBlur = function () {
//trigger validation message(s) on focus out
this.triggerValidationMessages();
};
ValidationMessagesDirective.prototype.triggerValidationMessages = function () {
this.updateErrorMessages();
if (this.model.invalid && (this.model.touched || this.model.formDirective.submitted)) {
for (var key in this.model.errors) {
if (this.model.errors != null && this.model.errors[key]) {
var validationMessage = this.messageConfigService.getMessageforError(key, this.model.errors[key]);
this.createErrorMessage(key, validationMessage);
}
}
}
};
ValidationMessagesDirective.prototype.createErrorMessage = function (errorType, validationMessage) {
var messageElement = this.elementRef.nativeElement.parentNode.querySelector('.' + validationMessage.selector);
var presentErrors = Object.keys(this.model.errors);
if (messageElement == null) {
if (errorType != 'required' && presentErrors.indexOf('required') == -1) {
var p = document.createElement('p');
p.className += " text-danger validation-message";
p.className += " " + validationMessage.selector;
p.innerHTML = validationMessage.text;
this.renderer.appendChild(this.elementRef.nativeElement.parentNode, p);
}
else if (errorType == 'required') {
//if 'required' error is present remove other ones first
var target = this.elementRef.nativeElement.parentNode.querySelector('.validation-message');
if (target) {
target.remove();
}
var p = document.createElement('p');
p.className += " text-danger validation-message";
p.className += " " + validationMessage.selector;
p.innerHTML = validationMessage.text;
this.renderer.appendChild(this.elementRef.nativeElement.parentNode, p);
}
}
};
ValidationMessagesDirective.prototype.updateErrorMessages = function () {
//check if we need to remove previously added error messages
for (var errorType in this.validationMessages) {
if (this.model.errors) {
var presentErrors = Object.keys(this.model.errors);
if (presentErrors.indexOf(errorType) === -1) {
var target = this.elementRef.nativeElement.parentNode.querySelector('.' + this.validationMessages[errorType].selector);
if (target != null) {
target.remove();
}
}
}
else {
//remove all errors as input is valid
var target = this.elementRef.nativeElement.parentNode.querySelector('.validation-message');
if (target) {
target.remove();
}
}
}
};
return ValidationMessagesDirective;
}());
ValidationMessagesDirective.decorators = [
{ type: _angular_core.Directive, args: [{
selector: '[appValidationMessages]'
},] },
];
/** @nocollapse */
ValidationMessagesDirective.ctorParameters = function () { return [
{ type: _angular_core.ElementRef, },
{ type: _angular_core.Renderer2, },
{ type: _angular_forms.NgModel, },
{ type: MessageConfigService, },
]; };
ValidationMessagesDirective.propDecorators = {
'onInput': [{ type: _angular_core.HostListener, args: ['input',] },],
'onBlur': [{ type: _angular_core.HostListener, args: ['blur',] },],
};
var ValidationMessagesModule = (function () {
function ValidationMessagesModule() {
}
ValidationMessagesModule.forRoot = function () {
return {
ngModule: ValidationMessagesModule,
providers: [MessageConfigService]
};
};
return ValidationMessagesModule;
}());
ValidationMessagesModule.decorators = [
{ type: _angular_core.NgModule, args: [{
imports: [
_angular_common.CommonModule
],
declarations: [
ValidationMessagesDirective
],
exports: [
ValidationMessagesDirective
],
providers: [
MessageConfigService
]
},] },
];
/** @nocollapse */
ValidationMessagesModule.ctorParameters = function () { return []; };
exports.ValidationMessagesModule = ValidationMessagesModule;
exports.ValidationMessagesDirective = ValidationMessagesDirective;
exports.MessageConfigService = MessageConfigService;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=validation-messages.umd.js.map