angular-bootstrap-italia
Version:
<p align="center"> <h1 align="center">Bootstrap Italia + Angular 9</h1>
55 lines • 6.34 kB
JavaScript
import { __decorate } from "tslib";
import { Component, Input, ChangeDetectionStrategy, Output, EventEmitter } from '@angular/core';
// Services
import { DynamicFormControlService } from './dynamic-form-control.service';
let DynamicFormComponent = class DynamicFormComponent {
constructor(qcs) {
this.qcs = qcs;
this.rows = [];
this.submitEvent = new EventEmitter();
this.cancelEvent = new EventEmitter();
this.payLoad = '';
}
ngOnInit() {
if (!this.submitLabel) {
this.submitLabel = 'Conferma';
}
const elements = [].concat(...this.rows.map(e => e.items));
this.form = this.qcs.toFormGroup(elements, this.defaultState);
}
onSubmit() {
this.submitEvent.emit(this.form.getRawValue());
}
onCancel() {
this.form.reset();
this.cancelEvent.emit();
}
};
DynamicFormComponent.ctorParameters = () => [
{ type: DynamicFormControlService }
];
__decorate([
Input()
], DynamicFormComponent.prototype, "rows", void 0);
__decorate([
Input()
], DynamicFormComponent.prototype, "defaultState", void 0);
__decorate([
Input()
], DynamicFormComponent.prototype, "submitLabel", void 0);
__decorate([
Output()
], DynamicFormComponent.prototype, "submitEvent", void 0);
__decorate([
Output()
], DynamicFormComponent.prototype, "cancelEvent", void 0);
DynamicFormComponent = __decorate([
Component({
selector: 'lib-dynamic-form',
template: "<div>\r\n <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\r\n\r\n <div *ngFor=\"let row of rows\">\r\n <div class=\"form-row\">\r\n <div *ngFor=\"let item of row.items\" [ngClass]=\"item.class\">\r\n <lib-dynamic-form-element [field]=\"item\" [form]=\"form\">\r\n </lib-dynamic-form-element>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-content></ng-content>\r\n\r\n <div class=\"form-row mt-5\">\r\n <div class=\"form-group col text-center\">\r\n <button type=\"button\" class=\"btn btn-outline-primary mr-1\" (click)=\"onCancel()\">Annulla</button>\r\n <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"!form.valid\">{{ submitLabel }}</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div *ngIf=\"payLoad\" class=\"form-row\">\r\n <strong>Saved the following values</strong><br>{{payLoad}}\r\n </div>\r\n</div>\r\n",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [""]
})
], DynamicFormComponent);
export { DynamicFormComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHluYW1pYy1mb3JtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2FuZ3VsYXItYm9vdHN0cmFwLWl0YWxpYS8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL2R5bmFtaWMtZm9ybS9keW5hbWljLWZvcm0uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBVSx1QkFBdUIsRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBTXhHLFdBQVc7QUFDWCxPQUFPLEVBQUUseUJBQXlCLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQVMzRSxJQUFhLG9CQUFvQixHQUFqQyxNQUFhLG9CQUFvQjtJQVkvQixZQUFvQixHQUE4QjtRQUE5QixRQUFHLEdBQUgsR0FBRyxDQUEyQjtRQVZ6QyxTQUFJLEdBQXNCLEVBQUUsQ0FBQztRQUk1QixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7UUFDakMsZ0JBQVcsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBRzNDLFlBQU8sR0FBRyxFQUFFLENBQUM7SUFFMEMsQ0FBQztJQUV4RCxRQUFRO1FBQ04sSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDckIsSUFBSSxDQUFDLFdBQVcsR0FBRyxVQUFVLENBQUM7U0FDL0I7UUFFRCxNQUFNLFFBQVEsR0FBRyxFQUFFLENBQUMsTUFBTSxDQUFDLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztRQUMzRCxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxHQUFHLENBQUMsV0FBVyxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDaEUsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDLENBQUM7SUFDakQsQ0FBQztJQUVELFFBQVE7UUFDTixJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ2xCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDMUIsQ0FBQztDQUNGLENBQUE7O1lBbkIwQix5QkFBeUI7O0FBVnpDO0lBQVIsS0FBSyxFQUFFO2tEQUE4QjtBQUM3QjtJQUFSLEtBQUssRUFBRTswREFBbUI7QUFDbEI7SUFBUixLQUFLLEVBQUU7eURBQXFCO0FBRW5CO0lBQVQsTUFBTSxFQUFFO3lEQUFrQztBQUNqQztJQUFULE1BQU0sRUFBRTt5REFBa0M7QUFQaEMsb0JBQW9CO0lBTmhDLFNBQVMsQ0FBQztRQUNULFFBQVEsRUFBRSxrQkFBa0I7UUFDNUIseTZCQUE0QztRQUU1QyxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7S0FDaEQsQ0FBQztHQUNXLG9CQUFvQixDQStCaEM7U0EvQlksb0JBQW9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25Jbml0LCBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuLy8gRm9ybSBNb2RlbHNcclxuaW1wb3J0IHsgRm9ybVJvdyB9IGZyb20gJy4uL2Zvcm0vZm9ybS1yb3cnO1xyXG5cclxuLy8gU2VydmljZXNcclxuaW1wb3J0IHsgRHluYW1pY0Zvcm1Db250cm9sU2VydmljZSB9IGZyb20gJy4vZHluYW1pYy1mb3JtLWNvbnRyb2wuc2VydmljZSc7XHJcblxyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdsaWItZHluYW1pYy1mb3JtJyxcclxuICB0ZW1wbGF0ZVVybDogJy4vZHluYW1pYy1mb3JtLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9keW5hbWljLWZvcm0uY29tcG9uZW50LnNjc3MnXSxcclxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxyXG59KVxyXG5leHBvcnQgY2xhc3MgRHluYW1pY0Zvcm1Db21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG5cclxuICBASW5wdXQoKSByb3dzOiBGb3JtUm93PHN0cmluZz5bXSA9IFtdO1xyXG4gIEBJbnB1dCgpIGRlZmF1bHRTdGF0ZTogYW55O1xyXG4gIEBJbnB1dCgpIHN1Ym1pdExhYmVsOiBzdHJpbmc7XHJcblxyXG4gIEBPdXRwdXQoKSBzdWJtaXRFdmVudCA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuICBAT3V0cHV0KCkgY2FuY2VsRXZlbnQgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XHJcblxyXG4gIGZvcm06IEZvcm1Hcm91cDtcclxuICBwYXlMb2FkID0gJyc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgcWNzOiBEeW5hbWljRm9ybUNvbnRyb2xTZXJ2aWNlKSB7ICB9XHJcblxyXG4gIG5nT25Jbml0KCkge1xyXG4gICAgaWYgKCF0aGlzLnN1Ym1pdExhYmVsKSB7XHJcbiAgICAgIHRoaXMuc3VibWl0TGFiZWwgPSAnQ29uZmVybWEnO1xyXG4gICAgfVxyXG5cclxuICAgIGNvbnN0IGVsZW1lbnRzID0gW10uY29uY2F0KC4uLnRoaXMucm93cy5tYXAoZSA9PiBlLml0ZW1zKSk7XHJcbiAgICB0aGlzLmZvcm0gPSB0aGlzLnFjcy50b0Zvcm1Hcm91cChlbGVtZW50cywgdGhpcy5kZWZhdWx0U3RhdGUpO1xyXG4gIH1cclxuXHJcbiAgb25TdWJtaXQoKSB7XHJcbiAgICB0aGlzLnN1Ym1pdEV2ZW50LmVtaXQodGhpcy5mb3JtLmdldFJhd1ZhbHVlKCkpO1xyXG4gIH1cclxuXHJcbiAgb25DYW5jZWwoKSB7XHJcbiAgICB0aGlzLmZvcm0ucmVzZXQoKTtcclxuICAgIHRoaXMuY2FuY2VsRXZlbnQuZW1pdCgpO1xyXG4gIH1cclxufVxyXG5cclxuIl19