ngx-config-form
Version:
use configuration to generate form
2 lines • 31.7 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/forms"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-config-form",["exports","@angular/core","rxjs","rxjs/operators","@angular/forms","@angular/common"],n):n((e=e||self)["ngx-config-form"]={},e.ng.core,e.rxjs,e.rxjs.operators,e.ng.forms,e.ng.common)}(this,function(e,n,t,r,o,i){"use strict";var a=function(e,n){return(a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,n){e.__proto__=n}||function(e,n){for(var t in n)n.hasOwnProperty(t)&&(e[t]=n[t])})(e,n)};function l(e,n){function t(){this.constructor=e}a(e,n),e.prototype=null===n?Object.create(n):(t.prototype=n.prototype,new t)}function s(e,n,t,r){return new(t||(t=Promise))(function(o,i){function a(e){try{s(r.next(e))}catch(n){i(n)}}function l(e){try{s(r["throw"](e))}catch(n){i(n)}}function s(e){e.done?o(e.value):new t(function(n){n(e.value)}).then(a,l)}s((r=r.apply(e,n||[])).next())})}function m(e,n){var t,r,o,i,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return i={next:l(0),"throw":l(1),"return":l(2)},"function"==typeof Symbol&&(i[Symbol.iterator]=function(){return this}),i;function l(i){return function(l){return function(i){if(t)throw new TypeError("Generator is already executing.");for(;a;)try{if(t=1,r&&(o=2&i[0]?r["return"]:i[0]?r["throw"]||((o=r["return"])&&o.call(r),0):r.next)&&!(o=o.call(r,i[1])).done)return o;switch(r=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,r=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!(o=(o=a.trys).length>0&&o[o.length-1])&&(6===i[0]||2===i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){a.label=i[1];break}if(6===i[0]&&a.label<o[1]){a.label=o[1],o=i;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(i);break}o[2]&&a.ops.pop(),a.trys.pop();continue}i=n.call(e,a)}catch(l){i=[6,l],r=0}finally{t=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,l])}}}function c(e){var n="function"==typeof Symbol&&e[Symbol.iterator],t=0;return n?n.call(e):{next:function(){return e&&t>=e.length&&(e=void 0),{value:e&&e[t++],done:!e}}}}var f=function(){function e(){this.isShowErrorMsg=!0,this.sbObs=new t.Subscription,this.ObjectUtil=Object}return Object.defineProperty(e.prototype,"cfForm",{get:function(){return this._cfForm},set:function(e){this._cfForm=e,this.cfFormSetting=e.cfFormSetting,this.cfFormGroup=e.cfFormGroup},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.groupElem=this.cfFormGroup.get(this.propName),this.elem=this.cfFormGroup.get([this.propName,this.cfFormSetting[this.propName].items[0].name]),this.elemValidators=this.cfFormSetting[this.propName].items[0].validators,this.setNotify()},e.prototype.ngOnDestroy=function(){this.sbObs.unsubscribe()},e.prototype.setNotify=function(){var e=this;this.sbObs.add(this.elem.statusChanges.pipe(r.filter(function(e){return"VALID"===e})).subscribe(function(n){e.cfForm.notifyValueChange(e.propName,e.elem.value)})),this.sbObs.add(this.elem.statusChanges.subscribe(function(n){var t,r,o="VALID"===n,i=e.propName+"_"+e.cfFormSetting[e.propName].items[0].name;if(!o&&e.elem.errors){var a={};try{for(var l=c(Object.keys(e.elem.errors)),s=l.next();!s.done;s=l.next()){var m=s.value;a[m]={msg:e.elemValidators[m].msg,dirty:e.elem.dirty}}}catch(f){t={error:f}}finally{try{s&&!s.done&&(r=l["return"])&&r.call(l)}finally{if(t)throw t.error}}e.cfForm.notifyValidatedInfo(i,!1,a)}o&&e.cfForm.notifyValidatedInfo(i,!0)}))},e.propDecorators={cfForm:[{type:n.Input}],isShowErrorMsg:[{type:n.Input}]},e}(),u=function(){function e(){}return e.getErrorMsgs=function(e){var n=e._errMsg_,t=[];return n&&Object.keys(n).forEach(function(e){Object.keys(n[e]).forEach(function(r){var o=n[e][r];o.dirty&&t.push(o.msg)})}),t},e.validateAllFormFields=function(n){Object.keys(n.controls).forEach(function(t){var r=n.get(t);r instanceof o.FormControl?(r.markAsDirty({onlySelf:!0}),r.markAsTouched({onlySelf:!0}),r.updateValueAndValidity({onlySelf:!0,emitEvent:!0})):r instanceof o.FormGroup&&e.validateAllFormFields(r)})},e}(),p=function(){function e(){this.buttonClass="",this.isDebug="N",this.type="button",this.isProcessing=!1,this.click=new n.EventEmitter}return e.prototype.ngOnInit=function(){},e.prototype.clickIt=function(e){e.preventDefault(),e.stopImmediatePropagation(),this.cfFormGroup.dirty&&(this.cfFormGroup.invalid||this.isProcessing||this.click.emit(e))},e.decorators=[{type:n.Component,args:[{selector:"cf-button",template:'<button [type]="type"\n [class]="buttonClass"\n [ngClass]="{\'disabled\': !(cfFormGroup.dirty && cfFormGroup.valid) || isProcessing}"\n (click)="clickIt($event)">\n <ng-content></ng-content>\n</button>\n\n<div *ngIf="isDebug===\'Y\'" class="tt">\n <hr />\n cfFormGroup.value : {{cfFormGroup.value | json}} <br />\n <hr />\n</div>\n',styles:[".tt{background-color:gray;position:fixed;bottom:0;left:0;width:100%;z-index:10000}"]}]}],e.ctorParameters=function(){return[]},e.propDecorators={cfFormGroup:[{type:n.Input}],buttonClass:[{type:n.Input}],isDebug:[{type:n.Input}],type:[{type:n.Input}],isProcessing:[{type:n.Input}],click:[{type:n.Output}]},e}(),d={provide:o.NG_VALUE_ACCESSOR,useExisting:n.forwardRef(function(){return g}),multi:!0},g=function(){function e(e){this.fb=e,this.isReady=!1,this.errorPropName="_errMsg_",this.autocomplete="off",this.cfFormSetting={},this.formClass="",this.isDebug=!1,this.cfFormReady=new n.EventEmitter,this.data$=new t.BehaviorSubject(this.data)}return e.prototype.ngOnInit=function(){this.initFormGroupSetting()},e.prototype.writeValue=function(e){e&&(this.data=e,this.setFormGroupValue(),this.setReady())},e.prototype.setReady=function(){this.isReady=!0,this.cfFormReady.emit()},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype.setDisabledState=function(e){},e.prototype.notifyValueChange=function(e,n){if(this.onChange){var t=n,r=this.cfFormSetting[e];r.converter&&(t=r.converter.from(n)),this.data[e]=t,this.data$.next(this.data),this.onChange(this.data)}},e.prototype.notifyValidatedInfo=function(e,n,t){if(this.onChange){if(n){delete(r=this.data[this.errorPropName]||{})[e],this.data[this.errorPropName]=r}else{var r;(r=this.data[this.errorPropName]||{})[e];r[e]=t,this.data[this.errorPropName]=r}this.onChange(this.data)}},e.prototype.onReady=function(){return this.cfFormReady},e.prototype.initFormGroupSetting=function(){var e,n,t,r;try{for(var o=c(Object.keys(this.cfFormSetting)),i=o.next();!i.done;i=o.next()){var a=i.value,l=this.cfFormSetting[a],s={};try{for(var m=c(l.items),f=m.next();!f.done;f=m.next()){var u=f.value,p=this.getValidators(u.validators);s[u.name]=["",p.validatorFns,p.asyncValidatorFns]}}catch(y){t={error:y}}finally{try{f&&!f.done&&(r=m["return"])&&r.call(m)}finally{if(t)throw t.error}}var d=this.fb.group(s),g=this.getValidators(l.validators);d.setValidators(g.validatorFns),d.setAsyncValidators(g.asyncValidatorFns),this.cfFormGroup.setControl(a,d)}}catch(h){e={error:h}}finally{try{i&&!i.done&&(n=o["return"])&&n.call(o)}finally{if(e)throw e.error}}},e.prototype.setFormGroupValue=function(){var e,n,t,r;try{for(var o=c(Object.keys(this.cfFormSetting)),i=o.next();!i.done;i=o.next()){var a=i.value,l=this.cfFormSetting[a];try{for(var s=c(l.items),m=s.next();!m.done;m=s.next()){var f=m.value,u=this.data[f.name]||f.value||"";l.converter&&(u=l.converter.to(u)),this.cfFormGroup.get([a,f.name]).setValue(u)}}catch(p){t={error:p}}finally{try{m&&!m.done&&(r=s["return"])&&r.call(s)}finally{if(t)throw t.error}}}}catch(d){e={error:d}}finally{try{i&&!i.done&&(n=o["return"])&&n.call(o)}finally{if(e)throw e.error}}},e.prototype.getValidators=function(e){var n,t,r=[],o=[];try{for(var i=c(Object.keys(e)),a=i.next();!a.done;a=i.next()){var l=e[a.value];l.isPromiseOrObservable?o.push(l.validator):r.push(l.validator)}}catch(s){n={error:s}}finally{try{a&&!a.done&&(t=i["return"])&&t.call(i)}finally{if(n)throw n.error}}return{validatorFns:r,asyncValidatorFns:o}},e.decorators=[{type:n.Component,args:[{selector:"cf-form",template:' <form *ngIf="isReady"\n [class]="formClass" \n [formGroup]="cfFormGroup"\n [autocomplete]="autocomplete"\n novalidate>\n\n <ng-content></ng-content>\n\n \x3c!-- <div class="form-row">\n <div class="form-group col-sm-10">\n <a href="#" class="btn btn-primary" (click)="submit($event)" [ngClass]="{\'disabled\': !(cfFormGroup.dirty && cfFormGroup.valid)}">Submit</a>\n <a href="#" class="btn btn-danger" (click)="delete($event)" [ngClass]="{\'d-none\': id===0}">Delete</a>\n <a href="#" class="btn btn-secondary" (click)="goBack($event)">Back</a>\n </div>\n </div> --\x3e\n\n <div *ngIf="isDebug">\n \n <hr /> \n cfFormGroup.value => {{cfFormGroup.value | json}} <br />\n cfFormGroup.valid => {{cfFormGroup.valid | json}} <br />\n cfFormGroup.touched => {{cfFormGroup.touched | json}} <br />\n cfFormGroup.dirty => {{cfFormGroup.dirty | json}}\n <hr />\n\n </div>\n\n </form>\n\n\n\n\n\n \x3c!-- <form>\n <div class="form-group row">\n <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>\n <div class="col-sm-10">\n <input type="email" class="form-control is-invalid" id="inputEmail3" placeholder="Email">\n <small id="emailHelp" class="form-text text-muted">We\'ll never share your email with anyone else.</small>\n <small id="emailHelp" class="form-text text-danger">We\'ll never share your email with anyone else.</small>\n </div>\n </div>\n <div class="form-group row">\n <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>\n <div class="col-sm-10">\n <input type="password" class="form-control" id="inputPassword3" placeholder="Password">\n </div>\n </div>\n \n <fieldset class="form-group">\n <div class="row">\n <legend class="col-form-legend col-sm-2">Radios</legend>\n <div class="col-sm-10">\n <div class="form-check">\n <label class="form-check-label">\n <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> Option one is this and that—be sure to include why it\'s great\n </label>\n </div>\n <div class="form-check">\n <label class="form-check-label">\n <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"> Option two can be something else and selecting it will deselect option one\n </label>\n </div>\n <div class="form-check disabled">\n <label class="form-check-label">\n <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> Option three is disabled\n </label>\n </div>\n <small id="emailHelp" class="form-text text-muted">We\'ll never share your email with anyone else.</small>\n <small id="emailHelp" class="form-text text-danger">We\'ll never share your email with anyone else.</small>\n </div>\n\n </div>\n </fieldset>\n\n <div class="form-group row">\n <div class="col-sm-2">Checkbox</div>\n <div class="col-sm-10">\n <div class="form-check">\n <label class="form-check-label">\n <input class="form-check-input" type="checkbox"> Check me out\n </label>\n </div>\n <div class="form-check">\n <label class="form-check-label">\n <input class="form-check-input" type="checkbox"> Check me out\n </label>\n </div>\n </div>\n </div>\n\n <div class="form-group row">\n <div class="col-sm-2">Example select</div>\n <div class="col-sm-10">\n <select class="form-control is-invalid" id="exampleFormControlSelect1">\n <option>1</option>\n <option>2</option>\n <option>3</option>\n <option>4</option>\n <option>5</option>\n </select>\n <small id="emailHelp" class="form-text text-muted">We\'ll never share your email with anyone else.</small>\n <small id="emailHelp" class="form-text text-danger">We\'ll never share your email with anyone else.</small>\n </div>\n </div>\n <div class="form-group row">\n <div class="col-sm-2">Example multiple select</div>\n <div class="col-sm-10">\n <select multiple class="form-control" id="exampleFormControlSelect2">\n <option>1</option>\n <option>2</option>\n <option>3</option>\n <option>4</option>\n <option>5</option>\n </select>\n <small id="emailHelp" class="form-text text-muted">We\'ll never share your email with anyone else.</small>\n <small id="emailHelp" class="form-text text-danger">We\'ll never share your email with anyone else.</small>\n </div>\n </div>\n <div class="form-group row">\n <div class="col-sm-2">Example textarea</div>\n <div class="col-sm-10">\n <textarea class="form-control" id="exampleFormControlTextarea1" rows="5"></textarea>\n <small id="emailHelp" class="form-text text-muted">We\'ll never share your email with anyone else.</small>\n <small id="emailHelp" class="form-text text-danger">We\'ll never share your email with anyone else.</small>\n </div>\n </div>\n\n <div class="form-group row">\n <div class="col-sm-10">\n <a href="#" class="btn btn-primary">Submit</a>\n <a href="#" class="btn btn-secondary">Reset</a>\n <a href="#" class="btn btn-secondary" (click)="goBack($event)">Back</a>\n </div>\n </div>\n\n\n </form> --\x3e\n',providers:[d],styles:[""]}]}],e.ctorParameters=function(){return[{type:o.FormBuilder}]},e.propDecorators={autocomplete:[{type:n.Input}],cfFormSetting:[{type:n.Input}],cfFormGroup:[{type:n.Input}],formClass:[{type:n.Input}],isDebug:[{type:n.Input}],cfFormReady:[{type:n.Output}]},e}(),y=function(e){function t(){var n=e.call(this)||this;return n.isMultiple=!0,n.result=[],n}return l(t,e),t.prototype.ngOnInit=function(){return s(this,void 0,void 0,function(){var n=this;return m(this,function(t){return e.prototype.ngOnInit.call(this),this.cfForm.onReady().subscribe(function(){n.setData()}),[2]})})},t.prototype.ngOnDestroy=function(){e.prototype.ngOnDestroy.call(this)},t.prototype.setData=function(){this.elem.value&&(this.result=this.elem.value.toString().split(",")),this.defaultValue=this.cfFormSetting[this.propName].items[0].value},t.prototype.chagne=function(e,n,t){e.preventDefault(),e.stopPropagation();var r=this.result.indexOf(t);n.checked&&-1===r&&this.result.push(t),n.checked||-1===r||this.result.splice(r,1),!this.isMultiple&&n.checked&&(this.result=[],this.result.push(t)),0===this.result.length&&(this.result=this.defaultValue.split(","));var o=this.result.filter(function(e){return e}).join(",");this.elem.setValue(o),this.elem.markAsDirty()},t.decorators=[{type:n.Component,args:[{selector:"cf-inputs-checkbox",template:'<ng-container [formGroup]="cfFormGroup">\n <ng-container [formGroupName]="propName">\n <ng-container *ngFor="let item of cfFormSetting[propName].items">\n <ng-container *ngIf="{ \n elem: cfFormGroup.get([propName, item.name]) \n }; let info">\n <label [for]="item.name" *ngIf="item.args[\'alias\']">{{item.args[\'alias\']}}</label>\n <div class="d-block cbList">\n <div class="form-check form-check-inline" *ngFor="let c of item.args[\'options\'];let i=index">\n <label class="form-check-label">\n <input type="checkbox"\n class="form-check-input" \n name="{{item.name}}-{{i}}"\n #cb\n [checked]="info.elem.value && info.elem.value.indexOf(c.value)!==-1"\n (change)="chagne($event, cb, c.value)">\n {{c.text}}\n </label>\n </div>\n </div>\n <input type="hidden" [formControlName]="item.name"/>\n\n <small class="form-text text-muted" *ngIf="item.args[\'murmur\']">\n {{item.args[\'murmur\']}}\n </small>\n \n <ng-container *ngIf="isShowErrorMsg && info.elem.dirty && info.elem.errors">\n <small class="form-text text-danger" *ngFor="let vName of ObjectUtil.keys(info.elem.errors)">\n {{item.validators[vName].msg}}\n </small>\n </ng-container>\n\n \x3c!-- <hr />\n item.args.options : {{item.args.options | json}} <br />\n info.elem.dirty : {{ info.elem.dirty | json }} <br />\n info.elem.errors: {{ info.elem.errors | json }} <br />\n info.elem.value: {{ info.elem.value | json }}\n <hr /> --\x3e\n\n </ng-container>\n </ng-container> \n </ng-container>\n</ng-container>\n',styles:[".cbList{margin-bottom:-.5rem}"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={propName:[{type:n.Input}],isMultiple:[{type:n.Input}]},t}(f),h=function(e){function t(){return e.call(this)||this}return l(t,e),t.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this),this.groupElemValidators=this.cfFormSetting[this.propName].validators,this.setComponentNotify()},t.prototype.ngOnDestroy=function(){e.prototype.ngOnDestroy.call(this),this.ob.unsubscribe()},t.prototype.setComponentNotify=function(){var e=this;this.ob=this.groupElem.statusChanges.subscribe(function(n){var t,r,o="VALID"===n,i=e.propName+"_";if(!o&&e.groupElem.errors){var a={};try{for(var l=c(Object.keys(e.groupElem.errors)),s=l.next();!s.done;s=l.next()){var m=s.value;a[m]={msg:e.groupElemValidators[m].msg,dirty:e.groupElem.dirty}}}catch(f){t={error:f}}finally{try{s&&!s.done&&(r=l["return"])&&r.call(l)}finally{if(t)throw t.error}}e.cfForm.notifyValidatedInfo(i,!1,a)}o&&e.cfForm.notifyValidatedInfo(i,!0)})},t.decorators=[{type:n.Component,args:[{selector:"cf-inputs-confirm-password",template:'<ng-container [formGroup]="cfFormGroup">\n <ng-container [formGroupName]="propName">\n <ng-container *ngIf="{ \n elem: cfFormGroup.get(propName) \n }; let gInfo">\n\n <ng-container *ngFor="let item of cfFormSetting[propName].items">\n <ng-container *ngIf="{ \n elem: cfFormGroup.get([propName, item.name]) \n }; let info">\n\n <div class="form-group">\n <label [for]="item.name" *ngIf="item.args[\'alias\']">{{item.args[\'alias\']}}</label>\n <input type="password" \n class="form-control" \n [formControlName]="item.name"\n [id]="item.name"\n [placeholder]="item.args[\'placeholder\']"\n [ngClass]="{\'is-invalid\': info.elem.dirty && info.elem.errors && info.elem.invalid }">\n \n <small class="form-text text-muted" *ngIf="item.args[\'murmur\']">\n {{item.args[\'murmur\']}}\n </small>\n\n <ng-container *ngIf="info.elem.dirty && info.elem.errors && info.elem.invalid">\n <small class="form-text text-danger" *ngFor="let vName of ObjectUtil.keys(info.elem.errors)">\n {{item.validators[vName].msg}}\n </small>\n </ng-container>\n\n </div>\n\n \x3c!-- <hr />\n info.elem.dirty : {{ info.elem.dirty | json }} <br />\n info.elem.errors: {{ info.elem.errors | json }} <br />\n info.elem.value: {{ info.elem.value | json }}\n <hr /> --\x3e\n\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf="isShowErrorMsg && gInfo.elem.dirty && gInfo.elem.errors && gInfo.elem.invalid">\n <small class="form-text text-danger" *ngFor="let vName of ObjectUtil.keys(gInfo.elem.errors)">\n {{cfFormSetting[propName].validators[vName].msg}}\n </small>\n </ng-container>\n\n \x3c!-- <hr />\n gInfo.elem.invalid: {{ gInfo.elem.invalid | json }} <br />\n gInfo.elem.dirty: {{ gInfo.elem.dirty | json }} <br />\n gInfo.elem.errors: {{ gInfo.elem.errors | json }} <br />\n gInfo.elem.value: {{ gInfo.elem.value | json }}\n <hr /> --\x3e\n\n </ng-container>\n\n </ng-container>\n</ng-container>\n\n',styles:[""]}]}],t.ctorParameters=function(){return[]},t.propDecorators={propName:[{type:n.Input}]},t}(f),v=function(e){function t(){return e.call(this)||this}return l(t,e),t.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},t.prototype.ngOnDestroy=function(){e.prototype.ngOnDestroy.call(this)},t.decorators=[{type:n.Component,args:[{selector:"cf-inputs-hidden",template:'<ng-container [formGroup]="cfFormGroup">\n <ng-container [formGroupName]="propName">\n <ng-container *ngFor="let item of cfFormSetting[propName].items">\n <ng-container *ngIf="{ \n elem: cfFormGroup.get([propName, item.name]) \n }; let info">\n \n <input type="hidden" [formControlName]="item.name" >\n\n \x3c!-- <small class="form-text text-muted" *ngIf="item.args[\'murmur\']">\n {{item.args[\'murmur\']}}\n </small> --\x3e\n \n <ng-container *ngIf="isShowErrorMsg && info.elem.dirty && info.elem.errors">\n <small class="form-text text-danger" *ngFor="let vName of ObjectUtil.keys(info.elem.errors)">\n {{item.validators[vName].msg}}\n </small>\n </ng-container>\n \n \x3c!-- <hr />\n info.elem.dirty : {{ info.elem.dirty | json }} <br />\n info.elem.errors: {{ info.elem.errors | json }} <br />\n info.elem.value: {{ info.elem.value | json }}\n <hr /> --\x3e\n\n </ng-container>\n </ng-container>\n </ng-container>\n</ng-container>',styles:[""]}]}],t.ctorParameters=function(){return[]},t.propDecorators={propName:[{type:n.Input}]},t}(f),b=function(e){function t(){return e.call(this)||this}return l(t,e),t.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},t.prototype.ngOnDestroy=function(){e.prototype.ngOnDestroy.call(this)},t.decorators=[{type:n.Component,args:[{selector:"cf-inputs-radio",template:'<ng-container [formGroup]="cfFormGroup">\n <ng-container [formGroupName]="propName">\n <ng-container *ngFor="let item of cfFormSetting[propName].items">\n <ng-container *ngIf="{ \n elem: cfFormGroup.get([propName, item.name]) \n }; let info">\n\n <label [for]="item.name" *ngIf="item.args[\'alias\']">{{item.args[\'alias\']}}</label>\n <div class="d-block rl-list">\n <div class="form-check form-check-inline" *ngFor="let c of item.args[\'options\']">\n <label class="form-check-label">\n <input type="radio"\n class="form-check-input" \n name="{{item.name}}"\n value="{{c.value}}"\n [formControlName]="item.name"\n [checked]="(info.elem.value===c.value)">\n {{c.text}}\n </label>\n </div>\n </div>\n\n <small class="form-text text-muted" *ngIf="item.args[\'murmur\']">\n {{item.args[\'murmur\']}}\n </small>\n\n <ng-container *ngIf="isShowErrorMsg && info.elem.dirty && info.elem.errors">\n <small class="form-text text-danger" *ngFor="let vName of ObjectUtil.keys(info.elem.errors)">\n {{item.validators[vName].msg}}\n </small>\n </ng-container>\n\n \x3c!-- <hr />\n info.elem.dirty : {{ info.elem.dirty | json }} <br />\n info.elem.errors: {{ info.elem.errors | json }} <br />\n info.elem.value: {{ info.elem.value | json }}\n <hr /> --\x3e\n\n </ng-container>\n </ng-container> \n </ng-container>\n</ng-container>',styles:[".rl-list{margin-bottom:-.5rem}"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={propName:[{type:n.Input}]},t}(f),x=function(e){function t(){return e.call(this)||this}return l(t,e),t.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},t.prototype.ngOnDestroy=function(){e.prototype.ngOnDestroy.call(this)},t.decorators=[{type:n.Component,args:[{selector:"cf-inputs-select",template:'<ng-container [formGroup]="cfFormGroup">\n <ng-container [formGroupName]="propName">\n <ng-container *ngFor="let item of cfFormSetting[propName].items">\n <ng-container *ngIf="{ \n elem: cfFormGroup.get([propName, item.name]) \n }; let info">\n <label [for]="item.name" *ngIf="item.args[\'alias\']">{{item.args[\'alias\']}}</label>\n <select \n [class]="inputClass" \n [id]="item.name"\n [formControlName]="item.name"\n [ngClass]="{ \'is-invalid\': info.elem.dirty && info.elem.errors }">\n <option *ngFor="let c of item.args[\'options\']" [value]="c.value">{{c.text}}</option>\n </select>\n\n <small class="form-text text-muted" *ngIf="item.args[\'murmur\']">\n {{item.args[\'murmur\']}}\n </small>\n\n <ng-container *ngIf="isShowErrorMsg && info.elem.dirty && info.elem.errors">\n <small class="form-text text-danger" *ngFor="let vName of ObjectUtil.keys(info.elem.errors)">\n {{item.validators[vName].msg}}\n </small>\n </ng-container>\n\n \x3c!-- <hr />\n info.elem.dirty : {{ info.elem.dirty | json }} <br />\n info.elem.errors: {{ info.elem.errors | json }} <br />\n info.elem.value: {{ info.elem.value | json }}\n <hr /> --\x3e\n\n </ng-container>\n </ng-container> \n </ng-container>\n</ng-container>',styles:[""]}]}],t.ctorParameters=function(){return[]},t.propDecorators={propName:[{type:n.Input}],inputClass:[{type:n.Input}]},t}(f),F=function(e){function t(){var n=e.call(this)||this;return n.isReadOnly=!1,n.type="text",n}return l(t,e),t.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},t.prototype.ngOnDestroy=function(){e.prototype.ngOnDestroy.call(this)},t.decorators=[{type:n.Component,args:[{selector:"cf-inputs-text",template:'<ng-container [formGroup]="cfFormGroup">\n <ng-container [formGroupName]="propName">\n <ng-container *ngFor="let item of cfFormSetting[propName].items">\n <ng-container *ngIf="{ \n elem: cfFormGroup.get([propName, item.name]) \n }; let info">\n <label [for]="item.name" *ngIf="item.args[\'alias\']">{{item.args[\'alias\']}}</label>\n <input \n [type]="type" \n [class]="inputClass" \n [id]="item.name" \n [placeholder]="item.args[\'placeholder\']"\n [formControlName]="item.name" \n [ngClass]="{ \'is-invalid\': info.elem.dirty && info.elem.errors }"\n [readonly]="isReadOnly"\n >\n <small class="form-text text-muted" *ngIf="item.args[\'murmur\']">\n {{item.args[\'murmur\']}}\n </small>\n \n <ng-container *ngIf="isShowErrorMsg && info.elem.dirty && info.elem.errors">\n <small class="form-text text-danger" *ngFor="let vName of ObjectUtil.keys(info.elem.errors)">\n {{item.validators[vName].msg}}\n </small>\n </ng-container>\n\n \x3c!-- <hr />\n errorKeys: {{ObjectUtil.keys(info.elem.errors || {})}} <br />\n info.elem.dirty && info.elem.errors: {{(info.elem.dirty && info.elem.errors) | json}} <br />\n info.elem.dirty : {{ info.elem.dirty | json }} <br />\n info.elem.errors: {{ info.elem.errors | json }} <br />\n info.elem.value: {{ info.elem.value | json }}\n <hr /> --\x3e\n \n </ng-container>\n </ng-container>\n </ng-container>\n</ng-container>',styles:[""]}]}],t.ctorParameters=function(){return[]},t.propDecorators={isReadOnly:[{type:n.Input}],type:[{type:n.Input}],inputClass:[{type:n.Input}],propName:[{type:n.Input}]},t}(f),I=function(e){function t(){var n=e.call(this)||this;return n.rows=3,n.isReadOnly=!1,n}return l(t,e),t.prototype.ngOnInit=function(){e.prototype.ngOnInit.call(this)},t.prototype.ngOnDestroy=function(){e.prototype.ngOnDestroy.call(this)},t.decorators=[{type:n.Component,args:[{selector:"cf-inputs-textarea",template:'<ng-container [formGroup]="cfFormGroup">\n <ng-container [formGroupName]="propName">\n <ng-container *ngFor="let item of cfFormSetting[propName].items">\n <ng-container *ngIf="{ \n elem: cfFormGroup.get([propName, item.name]) \n }; let info">\n <label [for]="item.name" *ngIf="item.args[\'alias\']">{{item.args[\'alias\']}}</label>\n <textarea\n [class]="inputClass"\n [id]="item.name" \n [placeholder]="item.args[\'placeholder\']"\n [formControlName]="item.name" \n [ngClass]="{ \'is-invalid\': info.elem.dirty && info.elem.errors }"\n [readonly]="isReadOnly"\n [rows]="rows"\n ></textarea>\n <small class="form-text text-muted" *ngIf="item.args[\'murmur\']">\n {{item.args[\'murmur\']}}\n </small>\n \n <ng-container *ngIf="isShowErrorMsg && info.elem.dirty && info.elem.errors">\n <small class="form-text text-danger" *ngFor="let vName of ObjectUtil.keys(info.elem.errors)">\n {{item.validators[vName].msg}}\n </small>\n </ng-container>\n\n \x3c!-- <hr />\n errorKeys: {{ObjectUtil.keys(info.elem.errors || {})}} <br />\n info.elem.dirty && info.elem.errors: {{(info.elem.dirty && info.elem.errors) | json}} <br />\n info.elem.dirty : {{ info.elem.dirty | json }} <br />\n info.elem.errors: {{ info.elem.errors | json }} <br />\n info.elem.value: {{ info.elem.value | json }}\n <hr /> --\x3e\n \n </ng-container>\n </ng-container>\n </ng-container>\n</ng-container>',styles:[""]}]}],t.ctorParameters=function(){return[]},t.propDecorators={rows:[{type:n.Input}],isReadOnly:[{type:n.Input}],inputClass:[{type:n.Input}],propName:[{type:n.Input}]},t}(f),N=function(){function e(){}return e.decorators=[{type:n.NgModule,args:[{declarations:[y,h,v,b,x,F,I,p,g],imports:[i.CommonModule,o.ReactiveFormsModule,o.FormsModule],exports:[y,h,v,b,x,F,I,p,g]}]}],e}(),O=function(){function e(){}return e.confirmPassword=function(e,n){return function(t){if(!t.dirty)return null;var r=t.get(e),o=t.get(n);if(r.value===o.value)return null;return{confirmPassword:!0}}},e.groupRequired=function(){for(var e=[],n=0;n<arguments.length;n++)e[n]=arguments[n];return function(n){var t,r;if(!n.dirty)return null;var o=[];try{for(var i=c(e),a=i.next();!a.done;a=i.next()){var l=a.value;o.push(n.get(l))}}catch(s){t={error:s}}finally{try{a&&!a.done&&(r=i["return"])&&r.call(i)}finally{if(t)throw t.error}}if(0===o.filter(function(e){return!e.value}).length)return null;return{groupRequired:!0}}},e.pattern=function(e,n){return function(t){if(!t.dirty)return null;if(!t.value)return null;if(n.test(t.value))return null;var r={};return r[e]=!0,r}},e.AsyncValidate=function(e,n,o){var i=this;return function(a){return a.dirty?a.valueChanges.pipe(r.debounceTime(n),r.switchMap(function(e){return s(i,void 0,void 0,function(){return m(this,function(n){switch(n.label){case 0:return[4,o(e)];case 1:return[2,n.sent()]}})})}),r.map(function(n){if(n)return null;var t={};return t[e]=!0,t}),r.first()):t.of(null)}},e}();e.BaseInput=f,e.CfValidators=O,e.NgxConfigFormModule=N,e.Utils=u,e.ɵa=y,e.ɵb=h,e.ɵc=v,e.ɵd=b,e.ɵe=x,e.ɵf=F,e.ɵg=I,e.ɵh=p,e.ɵi=g,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-config-form.umd.min.js.map