UNPKG

ng2-material-dynamic-form

Version:

Dynamic form module using material design for angular 2

1 lines 11 kB
{"__symbolic":"module","version":4,"metadata":{"FormMaterialModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":17,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"},{"__symbolic":"reference","name":"ɵi"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":29,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":30,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":31,"character":4},{"__symbolic":"reference","module":"ng2-material-import","name":"MaterialImportModule","line":32,"character":4}],"exports":[{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵc"},{"__symbolic":"reference","name":"ɵd"},{"__symbolic":"reference","name":"ɵe"},{"__symbolic":"reference","name":"ɵf"},{"__symbolic":"reference","name":"ɵg"},{"__symbolic":"reference","name":"ɵh"}],"providers":[{"__symbolic":"reference","name":"ɵb"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"ng2-material-form","template":"<form *ngIf=\"formData\" (submit)=\"onSubmit(form.value)\" [formGroup]=\"form\">\n <div class=\"form-group\" *ngFor=\"let param of formData\">\n <dy-checkbox *ngIf=\"getType(param.type) == 'checkbox'\" [params]=\"param\" [formGroup]=\"form\"></dy-checkbox>\n <!-- <dy-checkbox-list *ngIf=\"getType(param.type) == 'checkbox-list'\" [params]=\"param\" [formGroup]=\"form\"></dy-checkbox-list> -->\n <dy-date-picker *ngIf=\"getType(param.type) == 'date-picker'\" [params]=\"param\" [formGroup]=\"form\"></dy-date-picker>\n <dy-input *ngIf=\"getType(param.type) == 'input'\" [params]=\"param\" [formGroup]=\"form\"></dy-input>\n <dy-radio *ngIf=\"getType(param.type) == 'radio'\" [params]=\"param\" [formGroup]=\"form\"></dy-radio>\n <!-- <dy-radio-list *ngIf=\"getType(param.type) == 'radio-list'\" [params]=\"param\" [formGroup]=\"form\"></dy-radio-list> -->\n <dy-select *ngIf=\"getType(param.type) == 'select'\" [params]=\"param\" [formGroup]=\"form\"></dy-select>\n <dy-slide-toggle *ngIf=\"getType(param.type) == 'slide-toggle'\" [params]=\"param\" [formGroup]=\"form\"></dy-slide-toggle>\n <dy-slider *ngIf=\"getType(param.type) == 'slider'\" [params]=\"param\" [formGroup]=\"form\"></dy-slider>\n </div>\n <button>Submit</button>\n</form>\n","styles":[""]}]}],"members":{"formData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"output":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ɵb"}]}],"ngOnInit":[{"__symbolic":"method"}],"getType":[{"__symbolic":"method"}],"onSubmit":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":4,"character":1}}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"buildFormGroup":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"dy-input","template":"<mat-form-field [formGroup]=\"formGroup\" floatPlaceholder=\"auto\" class=\"input\">\n <input matInput type=\"{{params.type}}\" formControlName=\"{{params.attr}}\" placeholder=\"{{params.alias}}\">\n</mat-form-field>\n","styles":[""]}]}],"members":{"params":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"formGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵd":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"dy-checkbox","template":"<div class=\"checkbox\" [formGroup]=\"formGroup\">\n <mat-checkbox formControlName=\"{{params.attr}}\">{{params.alias}}</mat-checkbox>\n</div>\n","styles":[""]}]}],"members":{"params":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"formGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"dy-slider","template":"<div class=\"slider-container\" [formGroup]=\"formGroup\">\n <mat-slider\n class=\"slider\"\n formControlName=\"{{params.attr}}\"\n [disabled]=\"params.settings.disabled\"\n [invert]=\"params.settings.invert\"\n [max]=\"params.settings.max\"\n [min]=\"params.settings.min\"\n [step]=\"params.settings.step\"\n [thumbLabel]=\"params.settings.thumbLabel\"\n [tickInterval]=\"params.settings.tickInterval\"\n [vertical]=\"params.settings.vertical\">\n </mat-slider>\n</div>\n","styles":[""]}]}],"members":{"params":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"formGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵf":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"dy-slide-toggle","template":"<div class=\"slide-toggle-container\" [formGroup]=\"formGroup\">\n {{params.attr}}\n {{params.settings.checked}}\n <mat-slide-toggle\n class=\"slide-toggle\"\n formControlName=\"{{params.attr}}\"\n checked=false\n [disabled]=\"params.settings.disabled\">\n {{params.alias}}\n </mat-slide-toggle>\n</div>\n","styles":[""]}]}],"members":{"params":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"formGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵg":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"dy-select","template":"<div class=\"select-container\" [formGroup]=\"formGroup\">\n <mat-select placeholder=\"{{params.alias}}\" formControlName=\"{{params.attr}}\">\n <mat-option *ngFor=\"let option of params.options\" [value]=\"option.value\">\n {{option.key}}\n </mat-option>\n </mat-select>\n</div>\n","styles":[""]}]}],"members":{"params":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"formGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵh":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"dy-radio","template":"<div class=\"radio-group-container\" [formGroup]=\"formGroup\">\n <mat-radio-group class=\"radio\" formControlName=\"{{params.attr}}\">\n <mat-radio-button\n class=\"radio-button\"\n *ngFor=\"let option of params.options\"\n [value]=\"option.key\">\n {{option.value}}\n </mat-radio-button>\n </mat-radio-group>\n</div>\n","styles":[""]}]}],"members":{"params":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"formGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}},"ɵi":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"dy-date-picker","template":"<mat-form-field>\n <input matInput [matDatepicker]=\"picker\" placeholder=\"{{params.alias}}\">\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n","styles":[""]}]}],"members":{"params":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"formGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}]}}},"origins":{"FormMaterialModule":"./form-material.module","ɵa":"./components/form/form.component","ɵb":"./services/input-chooser.service","ɵc":"./components/form/input/input.component","ɵd":"./components/form/checkbox/checkbox.component","ɵe":"./components/form/slider/slider.component","ɵf":"./components/form/slide-toggle/slide-toggle.component","ɵg":"./components/form/select/select.component","ɵh":"./components/form/radio/radio.component","ɵi":"./components/form/date-picker/date-picker.component"},"importAs":"ng2-material-dynamic-form"}