UNPKG

validation-messages

Version:

Angular 2 module for displaying validation messages on template driven forms

3 lines (2 loc) 4.11 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@angular/http"),require("rxjs/Rx")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/common","@angular/forms","@angular/http","rxjs/Rx"],t):t(e.validationMessages={},e.ng.core,e.ng.common,e.ng.forms,e.ng.http,e.rxjs_Rx)}(this,function(e,t,r,s,n,i){"use strict";var o=function(){function e(e){this.http=e}return e.prototype.fetchValidationMessages=function(e){return this.http.get(e).map(function(e){return e.json()}).catch(function(e){return i.Observable.throw(e.json().error||"Server error")})},e.prototype.getMessageforError=function(e,t){var r=this.validationMessages[e]?this.validationMessages[e]:this.validationMessages.miscellaneous;if("object"!=typeof t)return r;switch(e){case"minlength":case"maxlength":r.text=r.text.replace("$DYNAMIC_VALUE",t.requiredLength);break;case"pattern":r.text=r.text.replace("$DYNAMIC_VALUE",t.requiredPattern)}return r},e.prototype.getAllMessages=function(){return this.validationMessages},e}();o.decorators=[{type:t.Injectable}],o.ctorParameters=function(){return[{type:n.Http}]};var a=function(){function e(e,t,r,s){this.elementRef=e,this.renderer=t,this.model=r,this.messageConfigService=s,this.validationMessages=this.messageConfigService.getAllMessages();var n=this;this.model.formDirective.ngSubmit.subscribe(function(e){n.triggerValidationMessages()}),this.model.valueChanges.subscribe(function(){n.triggerValidationMessages()})}return e.prototype.ngOnInit=function(){var e=this;setTimeout(function(){e.elementRef.nativeElement.hasAttribute("required")&&e.renderer.addClass(e.elementRef.nativeElement.previousElementSibling,"required")},200)},e.prototype.onInput=function(){this.triggerValidationMessages()},e.prototype.onBlur=function(){this.triggerValidationMessages()},e.prototype.triggerValidationMessages=function(){if(this.updateErrorMessages(),this.model.invalid&&(this.model.touched||this.model.formDirective.submitted))for(var e in this.model.errors)if(null!=this.model.errors&&this.model.errors[e]){var t=this.messageConfigService.getMessageforError(e,this.model.errors[e]);this.createErrorMessage(e,t)}},e.prototype.createErrorMessage=function(e,t){var r=this.elementRef.nativeElement.parentNode.querySelector("."+t.selector),s=Object.keys(this.model.errors);if(null==r)if("required"!=e&&-1==s.indexOf("required")){var n=document.createElement("p");n.className+=" text-danger validation-message",n.className+=" "+t.selector,n.innerHTML=t.text,this.renderer.appendChild(this.elementRef.nativeElement.parentNode,n)}else if("required"==e){var i=this.elementRef.nativeElement.parentNode.querySelector(".validation-message");i&&i.remove();var n=document.createElement("p");n.className+=" text-danger validation-message",n.className+=" "+t.selector,n.innerHTML=t.text,this.renderer.appendChild(this.elementRef.nativeElement.parentNode,n)}},e.prototype.updateErrorMessages=function(){for(var e in this.validationMessages)if(this.model.errors){var t=Object.keys(this.model.errors);if(-1===t.indexOf(e)){var r=this.elementRef.nativeElement.parentNode.querySelector("."+this.validationMessages[e].selector);null!=r&&r.remove()}}else{var r=this.elementRef.nativeElement.parentNode.querySelector(".validation-message");r&&r.remove()}},e}();a.decorators=[{type:t.Directive,args:[{selector:"[appValidationMessages]"}]}],a.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2},{type:s.NgModel},{type:o}]},a.propDecorators={onInput:[{type:t.HostListener,args:["input"]}],onBlur:[{type:t.HostListener,args:["blur"]}]};var l=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[o]}},e}();l.decorators=[{type:t.NgModule,args:[{imports:[r.CommonModule],declarations:[a],exports:[a],providers:[o]}]}],l.ctorParameters=function(){return[]},e.ValidationMessagesModule=l,e.ValidationMessagesDirective=a,e.MessageConfigService=o,Object.defineProperty(e,"__esModule",{value:!0})}); //# sourceMappingURL=validation-messages.umd.min.js.map