ngx-vest-forms
Version:
Opinionated template-driven forms library for Angular
60 lines • 9.84 kB
JavaScript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, HostBinding, inject, } from '@angular/core';
import { NgModel, NgModelGroup } from '@angular/forms';
import { mergeWith, of, Subject, switchMap, takeUntil } from 'rxjs';
import { FormDirective } from '../../directives/form.directive';
import * as i0 from "@angular/core";
export class ControlWrapperComponent {
constructor() {
this.ngModelGroup = inject(NgModelGroup, {
optional: true,
self: true,
});
this.destroy$$ = new Subject();
this.cdRef = inject(ChangeDetectorRef);
this.formDirective = inject(FormDirective);
}
get invalid() {
return this.control?.touched && this.errors;
}
get errors() {
if (this.control?.pending) {
return this.previousError;
}
else {
this.previousError = this.control?.errors?.['errors'];
}
return this.control?.errors?.['errors'];
}
get control() {
return this.ngModelGroup
? this.ngModelGroup.control
: this.ngModel?.control;
}
ngOnDestroy() {
this.destroy$$.next();
}
ngAfterViewInit() {
// Wait until the form is idle
// Then, listen to all events of the ngModelGroup or ngModel
// and mark the component and its ancestors as dirty
// This allows us to use the OnPush ChangeDetection Strategy
this.formDirective.idle$
.pipe(switchMap(() => this.ngModelGroup?.control?.events || of(null)), mergeWith(this.control?.events || of(null)), takeUntil(this.destroy$$))
.subscribe(() => {
this.cdRef.markForCheck();
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ControlWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: ControlWrapperComponent, isStandalone: true, selector: "[sc-control-wrapper]", host: { properties: { "class.sc-control-wrapper--invalid": "this.invalid" } }, queries: [{ propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }], ngImport: i0, template: "<div class=\"sc-control-wrapper\">\n <div class=\"sc-control-wrapper__content\">\n <ng-content></ng-content>\n </div>\n <div class=\"sc-control-wrapper__errors\">\n <ul [hidden]=\"!invalid\">\n @for (error of errors; track error) {\n <li>{{ error }}</li>\n }\n </ul>\n </div>\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: ControlWrapperComponent, decorators: [{
type: Component,
args: [{ selector: '[sc-control-wrapper]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"sc-control-wrapper\">\n <div class=\"sc-control-wrapper__content\">\n <ng-content></ng-content>\n </div>\n <div class=\"sc-control-wrapper__errors\">\n <ul [hidden]=\"!invalid\">\n @for (error of errors; track error) {\n <li>{{ error }}</li>\n }\n </ul>\n </div>\n</div>\n" }]
}], propDecorators: { ngModel: [{
type: ContentChild,
args: [NgModel]
}], invalid: [{
type: HostBinding,
args: ['class.sc-control-wrapper--invalid']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29udHJvbC13cmFwcGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC12ZXN0LWZvcm1zL3NyYy9saWIvY29tcG9uZW50cy9jb250cm9sLXdyYXBwZXIvY29udHJvbC13cmFwcGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC12ZXN0LWZvcm1zL3NyYy9saWIvY29tcG9uZW50cy9jb250cm9sLXdyYXBwZXIvY29udHJvbC13cmFwcGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFFTCx1QkFBdUIsRUFDdkIsaUJBQWlCLEVBQ2pCLFNBQVMsRUFDVCxZQUFZLEVBQ1osV0FBVyxFQUNYLE1BQU0sR0FFUCxNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQW1CLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUN4RSxPQUFPLEVBQUUsU0FBUyxFQUFFLEVBQUUsRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxNQUFNLE1BQU0sQ0FBQztBQUNwRSxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0saUNBQWlDLENBQUM7O0FBU2hFLE1BQU0sT0FBTyx1QkFBdUI7SUFQcEM7UUFTa0IsaUJBQVksR0FBd0IsTUFBTSxDQUFDLFlBQVksRUFBRTtZQUN2RSxRQUFRLEVBQUUsSUFBSTtZQUNkLElBQUksRUFBRSxJQUFJO1NBQ1gsQ0FBQyxDQUFDO1FBQ2MsY0FBUyxHQUFHLElBQUksT0FBTyxFQUFRLENBQUM7UUFDaEMsVUFBSyxHQUFHLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO1FBQ2xDLGtCQUFhLEdBQUcsTUFBTSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0tBMkN4RDtJQXZDQyxJQUNXLE9BQU87UUFDaEIsT0FBTyxJQUFJLENBQUMsT0FBTyxFQUFFLE9BQU8sSUFBSSxJQUFJLENBQUMsTUFBTSxDQUFDO0lBQzlDLENBQUM7SUFFRCxJQUFXLE1BQU07UUFDZixJQUFJLElBQUksQ0FBQyxPQUFPLEVBQUUsT0FBTyxFQUFFLENBQUM7WUFDMUIsT0FBTyxJQUFJLENBQUMsYUFBYSxDQUFDO1FBQzVCLENBQUM7YUFBTSxDQUFDO1lBQ04sSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLE1BQU0sRUFBRSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3hELENBQUM7UUFDRCxPQUFPLElBQUksQ0FBQyxPQUFPLEVBQUUsTUFBTSxFQUFFLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDMUMsQ0FBQztJQUVELElBQVksT0FBTztRQUNqQixPQUFPLElBQUksQ0FBQyxZQUFZO1lBQ3RCLENBQUMsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLE9BQU87WUFDM0IsQ0FBQyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsT0FBTyxDQUFDO0lBQzVCLENBQUM7SUFFTSxXQUFXO1FBQ2hCLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDeEIsQ0FBQztJQUVNLGVBQWU7UUFDcEIsOEJBQThCO1FBQzlCLDREQUE0RDtRQUM1RCxvREFBb0Q7UUFDcEQsNERBQTREO1FBQzVELElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSzthQUNyQixJQUFJLENBQ0gsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxZQUFZLEVBQUUsT0FBTyxFQUFFLE1BQU0sSUFBSSxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUMsRUFDL0QsU0FBUyxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsTUFBTSxJQUFJLEVBQUUsQ0FBQyxJQUFJLENBQUMsQ0FBQyxFQUMzQyxTQUFTLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUMxQjthQUNBLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDZCxJQUFJLENBQUMsS0FBSyxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQzVCLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQzs4R0FsRFUsdUJBQXVCO2tHQUF2Qix1QkFBdUIsb01BQ3BCLE9BQU8sZ0RDdkJ2Qiw2VEFZQTs7MkZEVWEsdUJBQXVCO2tCQVBuQyxTQUFTOytCQUNFLHNCQUFzQixjQUNwQixJQUFJLG1CQUdDLHVCQUF1QixDQUFDLE1BQU07OEJBR2pCLE9BQU87c0JBQXBDLFlBQVk7dUJBQUMsT0FBTztnQkFZVixPQUFPO3NCQURqQixXQUFXO3VCQUFDLG1DQUFtQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIEFmdGVyVmlld0luaXQsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGQsXG4gIEhvc3RCaW5kaW5nLFxuICBpbmplY3QsXG4gIE9uRGVzdHJveSxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmltcG9ydCB7IEFic3RyYWN0Q29udHJvbCwgTmdNb2RlbCwgTmdNb2RlbEdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgbWVyZ2VXaXRoLCBvZiwgU3ViamVjdCwgc3dpdGNoTWFwLCB0YWtlVW50aWwgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IEZvcm1EaXJlY3RpdmUgfSBmcm9tICcuLi8uLi9kaXJlY3RpdmVzL2Zvcm0uZGlyZWN0aXZlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnW3NjLWNvbnRyb2wtd3JhcHBlcl0nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICB0ZW1wbGF0ZVVybDogJy4vY29udHJvbC13cmFwcGVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY29udHJvbC13cmFwcGVyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBDb250cm9sV3JhcHBlckNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XG4gIEBDb250ZW50Q2hpbGQoTmdNb2RlbCkgcHVibGljIG5nTW9kZWw/OiBOZ01vZGVsOyAvLyBPcHRpb25hbCBuZ01vZGVsXG4gIHB1YmxpYyByZWFkb25seSBuZ01vZGVsR3JvdXA6IE5nTW9kZWxHcm91cCB8IG51bGwgPSBpbmplY3QoTmdNb2RlbEdyb3VwLCB7XG4gICAgb3B0aW9uYWw6IHRydWUsXG4gICAgc2VsZjogdHJ1ZSxcbiAgfSk7XG4gIHByaXZhdGUgcmVhZG9ubHkgZGVzdHJveSQkID0gbmV3IFN1YmplY3Q8dm9pZD4oKTtcbiAgcHJpdmF0ZSByZWFkb25seSBjZFJlZiA9IGluamVjdChDaGFuZ2VEZXRlY3RvclJlZik7XG4gIHByaXZhdGUgcmVhZG9ubHkgZm9ybURpcmVjdGl2ZSA9IGluamVjdChGb3JtRGlyZWN0aXZlKTtcbiAgLy8gQ2FjaGUgdGhlIHByZXZpb3VzIGVycm9yIHRvIGF2b2lkICdmbGlja2VyaW5nJ1xuICBwcml2YXRlIHByZXZpb3VzRXJyb3I/OiBzdHJpbmdbXTtcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLnNjLWNvbnRyb2wtd3JhcHBlci0taW52YWxpZCcpXG4gIHB1YmxpYyBnZXQgaW52YWxpZCgpIHtcbiAgICByZXR1cm4gdGhpcy5jb250cm9sPy50b3VjaGVkICYmIHRoaXMuZXJyb3JzO1xuICB9XG5cbiAgcHVibGljIGdldCBlcnJvcnMoKTogc3RyaW5nW10gfCB1bmRlZmluZWQge1xuICAgIGlmICh0aGlzLmNvbnRyb2w/LnBlbmRpbmcpIHtcbiAgICAgIHJldHVybiB0aGlzLnByZXZpb3VzRXJyb3I7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMucHJldmlvdXNFcnJvciA9IHRoaXMuY29udHJvbD8uZXJyb3JzPy5bJ2Vycm9ycyddO1xuICAgIH1cbiAgICByZXR1cm4gdGhpcy5jb250cm9sPy5lcnJvcnM/LlsnZXJyb3JzJ107XG4gIH1cblxuICBwcml2YXRlIGdldCBjb250cm9sKCk6IEFic3RyYWN0Q29udHJvbCB8IHVuZGVmaW5lZCB7XG4gICAgcmV0dXJuIHRoaXMubmdNb2RlbEdyb3VwXG4gICAgICA/IHRoaXMubmdNb2RlbEdyb3VwLmNvbnRyb2xcbiAgICAgIDogdGhpcy5uZ01vZGVsPy5jb250cm9sO1xuICB9XG5cbiAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuZGVzdHJveSQkLm5leHQoKTtcbiAgfVxuXG4gIHB1YmxpYyBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgLy8gV2FpdCB1bnRpbCB0aGUgZm9ybSBpcyBpZGxlXG4gICAgLy8gVGhlbiwgbGlzdGVuIHRvIGFsbCBldmVudHMgb2YgdGhlIG5nTW9kZWxHcm91cCBvciBuZ01vZGVsXG4gICAgLy8gYW5kIG1hcmsgdGhlIGNvbXBvbmVudCBhbmQgaXRzIGFuY2VzdG9ycyBhcyBkaXJ0eVxuICAgIC8vIFRoaXMgYWxsb3dzIHVzIHRvIHVzZSB0aGUgT25QdXNoIENoYW5nZURldGVjdGlvbiBTdHJhdGVneVxuICAgIHRoaXMuZm9ybURpcmVjdGl2ZS5pZGxlJFxuICAgICAgLnBpcGUoXG4gICAgICAgIHN3aXRjaE1hcCgoKSA9PiB0aGlzLm5nTW9kZWxHcm91cD8uY29udHJvbD8uZXZlbnRzIHx8IG9mKG51bGwpKSxcbiAgICAgICAgbWVyZ2VXaXRoKHRoaXMuY29udHJvbD8uZXZlbnRzIHx8IG9mKG51bGwpKSxcbiAgICAgICAgdGFrZVVudGlsKHRoaXMuZGVzdHJveSQkKVxuICAgICAgKVxuICAgICAgLnN1YnNjcmliZSgoKSA9PiB7XG4gICAgICAgIHRoaXMuY2RSZWYubWFya0ZvckNoZWNrKCk7XG4gICAgICB9KTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInNjLWNvbnRyb2wtd3JhcHBlclwiPlxuICA8ZGl2IGNsYXNzPVwic2MtY29udHJvbC13cmFwcGVyX19jb250ZW50XCI+XG4gICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cInNjLWNvbnRyb2wtd3JhcHBlcl9fZXJyb3JzXCI+XG4gICAgPHVsIFtoaWRkZW5dPVwiIWludmFsaWRcIj5cbiAgICAgIEBmb3IgKGVycm9yIG9mIGVycm9yczsgdHJhY2sgZXJyb3IpIHtcbiAgICAgICAgPGxpPnt7IGVycm9yIH19PC9saT5cbiAgICAgIH1cbiAgICA8L3VsPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19