axiom-form
Version:
Dynamic form component with a custom decorator
392 lines (383 loc) • 15.3 kB
JavaScript
import { Subject } from 'rxjs';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Injectable, Component, Input, ViewEncapsulation, Directive, HostListener, ElementRef, NgModule } from '@angular/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AxFormService = /** @class */ (function () {
function AxFormService() {
this._errors = {};
this.submit = new Subject();
this.errors = new Subject();
this.addErrorsRequest = new Subject();
}
/**
* @param {?} config
* @return {?}
*/
AxFormService.prototype.setConfig = /**
* @param {?} config
* @return {?}
*/
function (config) {
this.config = config;
};
/**
* @param {?} formControlName
* @param {?} errors
* @return {?}
*/
AxFormService.prototype.addError = /**
* @param {?} formControlName
* @param {?} errors
* @return {?}
*/
function (formControlName, errors) {
if (!this._errors[formControlName]) {
this._errors[formControlName] = {};
}
this._errors[formControlName] = Object.assign(this._errors[formControlName], errors);
};
/**
* @return {?}
*/
AxFormService.prototype.checkErrors = /**
* @return {?}
*/
function () {
this.errors.next(this.getErrors());
};
/**
* @param {?=} formControlName
* @return {?}
*/
AxFormService.prototype.clearErrors = /**
* @param {?=} formControlName
* @return {?}
*/
function (formControlName) {
if (formControlName === void 0) { formControlName = null; }
if (formControlName) {
delete this._errors[formControlName];
}
else {
this._errors = {};
this.errors.next([]);
}
};
/**
* @private
* @return {?}
*/
AxFormService.prototype.getErrors = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var errors = [];
for (var key in this._errors) {
if (this._errors.hasOwnProperty(key)) {
/** @type {?} */
var errs = this._errors[key];
if (errs) {
for (var err in errs) {
if (errs.hasOwnProperty(err)) {
/** @type {?} */
var error = errs[err];
if (err === 'email') {
error = key + " is not a valid email.";
}
else if (err === 'required') {
error = key + " is required.";
}
else if (err === 'minlength') {
error = "Minimun length for " + key + " is " + error.requiredLength + ".";
}
else if (err === 'maxlength') {
error = "Maximum length for " + key + " is " + error.requiredLength + ".";
}
else if (err === 'min') {
error = "Minimum number for " + key + " is " + error.min + ".";
}
else if (err === 'max') {
error = "[" + key + "] : Maximum number for " + key + " is " + error.max + ".";
}
else {
error = "[" + key + "] : " + error;
}
errors.push(error);
}
}
}
}
}
return errors;
};
AxFormService.decorators = [
{ type: Injectable }
];
/** @nocollapse */
AxFormService.ctorParameters = function () { return []; };
return AxFormService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @param {?} forms
* @return {?}
*/
function AxForm(forms) {
return (/**
* @param {?} constructor
* @return {?}
*/
function (constructor) {
constructor.prototype.axForms = {};
for (var form in forms) {
if (forms.hasOwnProperty(form)) {
/** @type {?} */
var formConfig = forms[form];
/** @type {?} */
var group = new FormBuilder().group(formConfig);
constructor.prototype.axForms[form] = group;
}
}
});
}
var AxFormComponent = /** @class */ (function () {
function AxFormComponent(_formService) {
this._formService = _formService;
this.submitted = false;
this.errors = [];
}
Object.defineProperty(AxFormComponent.prototype, "axAutoDisableSubmit", {
set: /**
* @param {?} axAutoDisableSubmit
* @return {?}
*/
function (axAutoDisableSubmit) {
this._axAutoDisableSubmit = axAutoDisableSubmit;
this.setConfig();
},
enumerable: true,
configurable: true
});
Object.defineProperty(AxFormComponent.prototype, "axShowErrors", {
set: /**
* @param {?} axShowErrors
* @return {?}
*/
function (axShowErrors) {
this._axShowErrors = axShowErrors;
this.setConfig();
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
AxFormComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this._formService.form = this.form;
this._formService.submit.subscribe((/**
* @param {?} submitted
* @return {?}
*/
function (submitted) {
_this.submitted = submitted;
}));
this._formService.errors.subscribe((/**
* @param {?} errors
* @return {?}
*/
function (errors) {
_this.errors = errors;
}));
};
/**
* @private
* @return {?}
*/
AxFormComponent.prototype.setConfig = /**
* @private
* @return {?}
*/
function () {
this._formService.setConfig({
axAutoDisableSubmit: this._axAutoDisableSubmit,
axShowErrors: this._axShowErrors
});
};
AxFormComponent.decorators = [
{ type: Component, args: [{
selector: '[ax-form]',
template: "\n <ng-content></ng-content>\n <div class=\"ax-form-errors\" *ngIf=\"errors.length > 0 && _formService.config.axShowErrors\">\n <div *ngFor=\"let error of errors\"> <b>\u25CF</b> {{ error }} </div>\n </div>\n ",
encapsulation: ViewEncapsulation.None,
providers: [AxFormService],
host: {
'[class.ax-submitted]': 'submitted'
},
styles: [".ax-form-invalid.ng-touched,.ax-submitted .ax-form-invalid{border:1px solid #f44336;box-shadow:0 0 0 rgba(244,67,54,.4);animation:2s infinite ax-error-pulse;-webkit-animation:2s infinite ax-error-pulse}.ax-form-errors{display:flex;flex-direction:column;padding:5px 8px;border:1px solid #ef9a9a;background-color:#ffebee;border-radius:5px;position:relative;margin:10px 5px;-webkit-animation:.5s cubic-bezier(.175,.885,.32,1.275) both ax-form-swing-in-bottom-fwd;animation:.5s cubic-bezier(.175,.885,.32,1.275) both ax-form-swing-in-bottom-fwd}.ax-form-errors>div{color:#c62828;margin:3px 0;font-size:13px;-webkit-animation:.5s cubic-bezier(.175,.885,.32,1.275) both ax-form-swing-in-top-fwd;animation:.5s cubic-bezier(.175,.885,.32,1.275) both ax-form-swing-in-top-fwd}@-webkit-keyframes ax-form-swing-in-bottom-fwd{0%{-webkit-transform:rotateX(100deg);transform:rotateX(100deg);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:1}}@keyframes ax-form-swing-in-bottom-fwd{0%{-webkit-transform:rotateX(100deg);transform:rotateX(100deg);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:1}}@-webkit-keyframes ax-form-swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);-webkit-transform-origin:top;transform-origin:top;opacity:1}}@keyframes ax-form-swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0);transform:rotateX(0);-webkit-transform-origin:top;transform-origin:top;opacity:1}}@-webkit-keyframes ax-error-pulse{0%{-webkit-box-shadow:0 0 0 0 rgba(244,67,54,.4)}70%{-webkit-box-shadow:0 0 0 10px rgba(244,67,54,0)}100%{-webkit-box-shadow:0 0 0 0 rgba(244,67,54,0)}}@keyframes ax-error-pulse{0%{box-shadow:0 0 0 0 rgba(244,67,54,.4)}70%{box-shadow:0 0 0 10px rgba(244,67,54,0)}100%{box-shadow:0 0 0 0 rgba(244,67,54,0)}}"]
}] }
];
/** @nocollapse */
AxFormComponent.ctorParameters = function () { return [
{ type: AxFormService }
]; };
AxFormComponent.propDecorators = {
form: [{ type: Input, args: ['ax-form',] }],
axAutoDisableSubmit: [{ type: Input }],
axShowErrors: [{ type: Input }]
};
return AxFormComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AxFormButtonDirective = /** @class */ (function () {
function AxFormButtonDirective(_formService) {
this._formService = _formService;
this.disabled = false;
}
/**
* @return {?}
*/
AxFormButtonDirective.prototype.onClick = /**
* @return {?}
*/
function () {
var _this = this;
this._formService.submit.next(this.type === 'submit');
if (this.type === 'reset') {
setTimeout((/**
* @return {?}
*/
function () {
_this._formService.clearErrors();
}), 0);
}
else {
this._formService.addErrorsRequest.next();
}
this._formService.checkErrors();
};
AxFormButtonDirective.decorators = [
{ type: Directive, args: [{
selector: '[axFormButton]',
host: {
'[disabled]': '_formService.config.axAutoDisableSubmit && type === "submit" && _formService.form.status.toLowerCase() === "invalid"'
}
},] }
];
/** @nocollapse */
AxFormButtonDirective.ctorParameters = function () { return [
{ type: AxFormService }
]; };
AxFormButtonDirective.propDecorators = {
type: [{ type: Input, args: ['axFormButton',] }],
onClick: [{ type: HostListener, args: ['click',] }]
};
return AxFormButtonDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AxFormControlDirective = /** @class */ (function () {
function AxFormControlDirective(_element, _formService) {
this._element = _element;
this._formService = _formService;
}
/**
* @return {?}
*/
AxFormControlDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
this.controlName = this._element.nativeElement.getAttribute('formControlName');
this.formControl = this._formService.form.controls[this.controlName];
this._formService.addError(this.controlName, this.formControl.errors);
this._formService.addErrorsRequest.subscribe((/**
* @return {?}
*/
function () {
_this._formService.addError(_this.controlName, _this.formControl.errors);
}));
this.formControl.statusChanges.subscribe((/**
* @param {?} status
* @return {?}
*/
function (status) {
_this._formService.clearErrors(_this.controlName);
if (status.toLowerCase() === 'invalid') {
_this._formService.addError(_this.controlName, _this.formControl.errors);
}
_this._formService.checkErrors();
}));
};
AxFormControlDirective.decorators = [
{ type: Directive, args: [{
selector: '[axFormControl]',
host: {
'class': 'ax-form-control',
'[class.ax-form-invalid]': 'formControl.invalid'
}
},] }
];
/** @nocollapse */
AxFormControlDirective.ctorParameters = function () { return [
{ type: ElementRef },
{ type: AxFormService }
]; };
return AxFormControlDirective;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var AxiomFormModule = /** @class */ (function () {
function AxiomFormModule() {
}
AxiomFormModule.decorators = [
{ type: NgModule, args: [{
declarations: [
AxFormComponent,
AxFormButtonDirective,
AxFormControlDirective
],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule
],
exports: [
AxFormComponent,
AxFormButtonDirective,
AxFormControlDirective
]
},] }
];
return AxiomFormModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { AxForm, AxFormComponent, AxFormButtonDirective, AxFormControlDirective, AxFormService, AxiomFormModule };
//# sourceMappingURL=axiom-form.js.map