lc-forms/bundles/lc-forms.umd.min.js

Is a library for simplified object-based creation and validation of forms in Angular/Angular Universal. The library is inspired by [angular.io dynamic forms](https://angular.io/docs/ts/latest/cookbook/dynamic-form.html) and [Filip Lauc's](https://github.c

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common"),require("@angular/core"),require("@angular/forms")):"function"==typeof define&&define.amd?define(["exports","@angular/common","@angular/core","@angular/forms"],t):t(e["lc-forms"]={},e.ng.common,e.ng.core,e.ng.forms)}(this,function(e,t,n,s){"use strict";var o=function(){function e(){}return e.match=function(e){return function(t){return t.value&&t.root.controls&&t.root.controls[e].value!==t.value?{match:{currentValue:t.value,requiredValue:t.root.controls[e].value,mustMatchField:e}}:null}},e}(),a=function(){function e(){}return e.prototype.create=function(e){var t={},n={},a=[];return e.forEach(function(e){var n=e.value||"",o=null;e.validation&&(Array.isArray(e.validation)?(o=[],e.validation.forEach(function(t){return o.push(r(t,e))})):o=r(e.validation)),t[e.key]=new s.FormControl(n,o)}),n.fbGroup=new s.FormGroup(t),a.length&&(n.matches=a),n;function r(e,t){switch(e.type){case"required":return s.Validators.required;case"minLength":return s.Validators.minLength(e.value);case"maxLength":return s.Validators.maxLength(e.value);case"pattern":return s.Validators.pattern(e.value);case"match":return a.push({toMatch:e.value,model:t.key}),o.match(e.value)}}},e}();a.decorators=[{type:n.Injectable}],a.ctorParameters=function(){return[]};var r=function(){function e(e){this._controlGroup=e,this.submitted=new n.EventEmitter,this.changed=new n.EventEmitter}return Object.defineProperty(e.prototype,"lcFormData",{set:function(e){this._data=e,this._data.settings=this._setSettings(e.settings),this.sortElements();var t=this._controlGroup.create(this._data.elements);this._form=t.fbGroup,this._matches=t.matches,this.comp={data:this._data,form:this._form,settings:{singleErrorMessage:this._data.settings.singleErrorMessage,errorOnDirty:this._data.settings.errorOnDirty,showValidation:this._data.settings.showValidation,extraValidation:this._data.settings.submitButtonExtraValidation||!0}}},enumerable:!0,configurable:!0}),e.prototype.submit=function(){this.submitted.emit(this._form.value)},e.prototype.onElementValueChange=function(e){if(this._matches){var t=Object.keys(e)[0],n=this._matches[0].find(function(e){return e.toMatch===t});n&&this._form.controls[n.model].updateValueAndValidity()}this.changed.emit(e)},e.prototype.sortElements=function(){this._data.elements.sort(function(e,t){return e.order-t.order})},e.prototype._setSettings=function(e){var t={submitButton:!0,submitButtonText:"Submit",submitButtonExtraValidation:null,noteText:null,noteLabel:null,showValidation:!0,singleErrorMessage:!0,errorOnDirty:!0};if(e)for(var n in t)e.hasOwnProperty(n)?t[n]=e[n]:t[n]=t[n];return t},e}();r.decorators=[{type:n.Component,args:[{template:'\n      <form [formGroup]="comp.form" [ngClass]="comp.data.classes?.form">\n          <lc-element *ngFor="let e of comp.data.elements" [info]="{element: e, form: comp.form, settings: comp.settings, classes: comp.data.classes}" (valueChange)="onElementValueChange($event)"></lc-element>\n          <div class="row">\n              <div *ngIf="comp.data.settings.submitButton" [ngClass]="comp.data.classes?.submit">\n                  <button type="submit" [disabled]="!comp.form.valid && comp.settings.extraValidation" [ngClass]="comp.data.classes?.submitButton">{{comp.data.settings.submitButtonText}}</button>\n              </div>\n              <div *ngIf="comp.data.settings.noteText" [ngClass]="comp.data.classes.note">\n                  <span *ngIf="comp.data.settings.noteLabel" [ngClass]="comp.data.classes.noteLabel">{{comp.data.settings.noteLabel}}</span>&nbsp;\n                  {{comp.data.settings.noteText}}\n              </div>\n          </div>\n      </form>\n    ',selector:"lc-form"}]}],r.ctorParameters=function(){return[{type:a}]},r.propDecorators={lcFormData:[{type:n.Input}],submitted:[{type:n.Output}],changed:[{type:n.Output}]};var i=function(){function e(){this.valueChange=new n.EventEmitter,this.checkboxIsRequired=!1}return Object.defineProperty(e.prototype,"toSet",{get:function(){return this.element&&this.element.classes&&this.element.classes.wrapper?this.element.classes.wrapper:""},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"info",{set:function(e){this.element=e.element,this.form=e.form,this.settings=e.settings,this.classes=e.classes,"checkbox"===this.element.type&&(this.element.value=this.element.value?this.element.value:[],this.checkboxIsRequired=this.element.validation&&"required"===this.element.validation[0].type),this.classes.errors&&(this.element.classes.error?this.element.classes.error=this.element.classes.error.concat(this.classes.errors):this.element.classes.error=this.classes.errors)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"showErrorMsg",{get:function(){return this.settings.errorOnDirty?!this.form.controls[this.element.key].valid&&!this.form.controls[this.element.key].dirty:!this.form.controls[this.element.key].valid},enumerable:!0,configurable:!0}),e.prototype.errors=function(){var e=this;if(this.element.validation&&!this.form.controls[this.element.key].valid){var t=[],n=this.form.controls[this.element.key].errors,s=Object.keys(n);return this.settings.singleErrorMessage?t.push(this._setError(s[s.length-1],n)):s.forEach(function(s){return t.push(e._setError(s,n))}),t}},e.prototype.setRadio=function(e){this.form.controls[this.element.key].setValue(e.value),this.onValueChange(e.value)},e.prototype.setCheckbox=function(e){var t=this.element.value.indexOf(e.value);-1!==t?this.element.value.splice(t,1):this.element.value.push(e.value),this.form.controls[this.element.key].setValue(this.element.value),this.onValueChange(this.element.value)},e.prototype.chackboxValueChange=function(){var e=this;this.checkboxIsRequired&&(1===this.element.value.length?this.element.options.find(function(t){return t.value===e.element.value[0]}).disabled=!0:this.element.options.forEach(function(e){return e.disabled=!1}))},e.prototype.onValueChange=function(e){var t;!1!==this.element.emitChanges&&this.valueChange.emit(((t={})[this.element.key]=e,t))},e.prototype.isSelectActive=function(e){return!!this.element.value.find(function(t){return t===e.value})},e.prototype._setError=function(e,t){var n=this.element.validation.find(function(t){return t.type.toLowerCase()===e}).message,s=this.element.label||this.element.key;if(!n)switch(e){case"required":n=s+" is required.";break;case"minlength":n=s+" has to be at least "+t[e].requiredLength+" characters long.";break;case"maxlength":n=s+" can't be longer then "+t[e].requiredLength+" characters.";break;case"pattern":n=s+" must match this pattern: "+t[e].requiredPattern+".";break;case"match":n=s+" must match the "+t[e].mustMatchField+" field."}return n},e}();i.decorators=[{type:n.Component,args:[{selector:"lc-element",template:'\n      <div [formGroup]="form" [ngClass]="element.classes?.group">\n          <label *ngIf="element.label"\n                 [ngClass]="element.classes?.label"\n                 [attr.for]="element.key">\n              {{element.label}}\n          </label>\n          <div [ngSwitch]="element.type">\n              <select *ngSwitchCase="\'dropdown\'"\n                      [formControlName]="element.key"\n                      (ngModelChange)="onValueChange($event)"\n                      [ngClass]="element.classes?.element"\n                      [id]="element.key">\n                  <option *ngFor="let o of element.options" [value]="o.value">{{o.name ? o.name : o.value}}</option>\n              </select>\n\n              <div *ngSwitchCase="\'checkbox\'" [ngClass]="element.classes?.element">\n                  <div class="checkbox" *ngFor="let o of element.options">\n                      <input [type]="element.type"\n                             [formControlName]="element.key"\n                             [name]="element.key"\n                             [value]="o.value"\n                             [checked]="isSelectActive(o)"\n                             (change)="chackboxValueChange()"\n                             (click)="setCheckbox(o)">\n                      <span>{{o.name ? o.name : o.value}}</span>\n                  </div>\n              </div>\n\n              <textarea *ngSwitchCase="\'textarea\'"\n                  [formControlName]="element.key"\n                  (ngModelChange)="onValueChange($event)"\n                  [id]="element.key"\n                  [attr.placeholder]="element.placeholder"\n                  [attr.rows]="element.rows"\n                  [ngClass]="element.classes?.element"></textarea>\n\n              <div *ngSwitchCase="\'radio\'" [ngClass]="element.classes?.element">\n                  <div class="radio" *ngFor="let o of element.options">\n                      <input [type]="element.type"\n                             [formControlName]="element.key"\n                             [name]="element.key"\n                             [value]="o.value"\n                             [checked]="element.value === o.value"\n                             (click)="setRadio(o)">\n                      <span>{{o.name ? o.name : o.value}}</span>\n                  </div>\n              </div>\n\n              <input *ngSwitchDefault\n                     [formControlName]="element.key"\n                     [attr.placeholder]="element.placeholder"\n                     [type]="element.type"\n                     (ngModelChange)="onValueChange($event)"\n                     [ngClass]="element.classes?.element"\n                     [id]="element.key">\n          </div>\n\n          <div *ngIf="settings.showValidation" [hidden]="showErrorMsg">\n              <span *ngFor="let e of errors()" [ngClass]="element.classes?.error">{{e}}</span>\n          </div>\n      </div>\n    '}]}],i.ctorParameters=function(){return[]},i.propDecorators={toSet:[{type:n.HostBinding,args:["class"]}],info:[{type:n.Input}],valueChange:[{type:n.Output}]};var l=function(){return function(){}}();l.decorators=[{type:n.NgModule,args:[{imports:[t.CommonModule,s.ReactiveFormsModule],declarations:[r,i],exports:[r,i],providers:[a]}]}],l.ctorParameters=function(){return[]},e.LCFormsModule=l,e.ɵc=i,e.ɵa=r,e.ɵb=a,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=lc-forms.umd.min.js.map