@taiga-ui/kit
Version:
Taiga UI Angular main components kit
216 lines (211 loc) • 8.69 kB
JavaScript
import { __decorate, __param } from 'tslib';
import { Optional, Self, Inject, ChangeDetectorRef, Input, Component, NgModule } from '@angular/core';
import { NgControl, FormArrayName, FormGroupName, FormGroupDirective, ReactiveFormsModule } from '@angular/forms';
import { tuiAssert, TuiValidationError, tuiRequiredSetter } from '@taiga-ui/cdk';
import { tuiHeightCollapse, tuiFadeIn, TuiErrorModule } from '@taiga-ui/core';
import { TUI_VALIDATION_ERRORS } from '@taiga-ui/kit/tokens';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { CommonModule } from '@angular/common';
// TODO: Refactor
// @dynamic
var TuiFieldErrorComponent = /** @class */ (function () {
function TuiFieldErrorComponent(ngControl, formArrayName, formGroupName, formGroup, changeDetectorRef, validationErrors) {
this.ngControl = ngControl;
this.formArrayName = formArrayName;
this.formGroupName = formGroupName;
this.formGroup = formGroup;
this.changeDetectorRef = changeDetectorRef;
this.validationErrors = validationErrors;
this.firstError = null;
this.errorsOrder = [];
this.destroy$ = new Subject();
tuiAssert.assert(!!this.ngControl, "NgControl not injected in " + this.constructor.name + "!" +
' Use [(ngModel)] or [formControl] or formControlName for correct work.');
if (this.ngControl) {
this.ngControl.valueAccessor = this;
}
}
Object.defineProperty(TuiFieldErrorComponent.prototype, "order", {
set: function (value) {
this.errorsOrder = value;
this.updateErrorText();
},
enumerable: true,
configurable: true
});
TuiFieldErrorComponent.prototype.ngOnInit = function () {
var _this = this;
var control = this.control;
if (!control) {
return;
}
// Temporary workaround until issue with async validators will be resolved.
// https://github.com/angular/angular/issues/13200
if (control.asyncValidator) {
control.updateValueAndValidity();
}
this.updateErrorText();
control.statusChanges.pipe(takeUntil(this.destroy$)).subscribe(function () {
_this.updateErrorText();
});
};
TuiFieldErrorComponent.prototype.ngOnDestroy = function () {
this.destroy$.next();
this.destroy$.complete();
};
Object.defineProperty(TuiFieldErrorComponent.prototype, "computedError", {
get: function () {
return this.invalid && this.touched && this.firstError ? this.firstError : null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiFieldErrorComponent.prototype, "invalid", {
get: function () {
var control = this.control;
return control && control.invalid !== null ? control.invalid : false;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiFieldErrorComponent.prototype, "touched", {
get: function () {
var control = this.control;
return control && control.touched !== null ? control.touched : false;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiFieldErrorComponent.prototype, "control", {
get: function () {
if (this.ngControl) {
return this.ngControl.control;
}
if (this.formArrayName) {
return this.formArrayName.control;
}
if (this.formGroupName) {
return this.formGroupName.control;
}
if (this.formGroup) {
return this.formGroup.control;
}
return null;
},
enumerable: true,
configurable: true
});
TuiFieldErrorComponent.prototype.registerOnChange = function () {
this.markForCheck();
};
TuiFieldErrorComponent.prototype.registerOnTouched = function () {
this.markForCheck();
};
TuiFieldErrorComponent.prototype.setDisabledState = function () {
this.markForCheck();
};
TuiFieldErrorComponent.prototype.writeValue = function () {
this.markForCheck();
};
Object.defineProperty(TuiFieldErrorComponent.prototype, "firstErrorIdByOrder", {
get: function () {
var _this = this;
var firstErrorId = this.errorsOrder &&
this.errorsOrder.find(function (errorId) { return !!_this.controlErrors[errorId]; });
return firstErrorId || null;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiFieldErrorComponent.prototype, "firstErrorId", {
get: function () {
var errorIds = Object.keys(this.controlErrors);
return errorIds[0];
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiFieldErrorComponent.prototype, "controlErrors", {
get: function () {
var control = this.control;
return (control && control.errors) || {};
},
enumerable: true,
configurable: true
});
TuiFieldErrorComponent.prototype.updateErrorText = function () {
this.firstError = this.getErrorText();
};
TuiFieldErrorComponent.prototype.getErrorText = function () {
var firstErrorId = this.firstErrorIdByOrder || this.firstErrorId;
var firstError = firstErrorId && this.controlErrors[firstErrorId];
// @bad TODO: Remove firstError.message check after everybody migrates to TuiValidationError
if (firstError &&
(firstError instanceof TuiValidationError ||
typeof firstError.message === 'string')) {
return firstError;
}
return firstErrorId
? new TuiValidationError(this.validationErrors[firstErrorId], firstError)
: null;
};
TuiFieldErrorComponent.prototype.markForCheck = function () {
this.changeDetectorRef.markForCheck();
};
TuiFieldErrorComponent.ctorParameters = function () { return [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: FormArrayName, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [FormArrayName,] }] },
{ type: FormGroupName, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [FormGroupName,] }] },
{ type: FormGroupDirective, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [FormGroupDirective,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: undefined, decorators: [{ type: Inject, args: [TUI_VALIDATION_ERRORS,] }] }
]; };
__decorate([
Input(),
tuiRequiredSetter()
], TuiFieldErrorComponent.prototype, "order", null);
TuiFieldErrorComponent = __decorate([
Component({
selector: 'tui-field-error',
// @bad TODO: find a way to get 'touched' state change
// https://github.com/angular/angular/issues/10887
// changeDetection: ChangeDetectionStrategy.OnPush,
template: "<tui-error [error]=\"computedError\"></tui-error>\n",
animations: [tuiHeightCollapse, tuiFadeIn],
styles: [":host{display:block}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Optional()),
__param(1, Self()),
__param(1, Inject(FormArrayName)),
__param(2, Optional()),
__param(2, Self()),
__param(2, Inject(FormGroupName)),
__param(3, Optional()),
__param(3, Self()),
__param(3, Inject(FormGroupDirective)),
__param(4, Inject(ChangeDetectorRef)),
__param(5, Inject(TUI_VALIDATION_ERRORS))
], TuiFieldErrorComponent);
return TuiFieldErrorComponent;
}());
var TuiFieldErrorModule = /** @class */ (function () {
function TuiFieldErrorModule() {
}
TuiFieldErrorModule = __decorate([
NgModule({
imports: [CommonModule, ReactiveFormsModule, TuiErrorModule],
declarations: [TuiFieldErrorComponent],
exports: [TuiFieldErrorComponent],
})
], TuiFieldErrorModule);
return TuiFieldErrorModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { TuiFieldErrorComponent, TuiFieldErrorModule };
//# sourceMappingURL=taiga-ui-kit-components-field-error.js.map