@3kles/kles-material-dynamicforms 14.10.0 → 14.11.0

package/fesm2020/3kles-kles-material-dynamicforms.mjs

@@ -7,7 +7,7 @@ import { FormControl, Validators, FormControlDirective, FormControlName, NG_VALU
 import { concat, of, Subject, Observable, BehaviorSubject, ReplaySubject } from 'rxjs';
 import { take, catchError, map, takeUntil, startWith, switchMap, debounceTime } from 'rxjs/operators';
 import * as i7$1 from '@angular/material/core';
-import { MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatNativeDateModule, MatOption, ErrorStateMatcher } from '@angular/material/core';
+import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS, MatNativeDateModule, MatOption, ErrorStateMatcher } from '@angular/material/core';
 import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i4$1 from '@angular/material/icon';
@@ -222,6 +222,11 @@ class KlesDynamicFieldDirective {
         }
         const options = {
             providers: this.field.dateOptions ? [
+                ...(this.field.dateOptions.adapter ? [{
+                        provide: DateAdapter,
+                        useClass: this.field.dateOptions.adapter.class,
+                        deps: this.field.dateOptions.adapter.deps || [],
+                    }] : []),
                 { provide: MAT_DATE_LOCALE, useValue: this.field.dateOptions.language },
                 { provide: MAT_DATE_FORMATS, useValue: this.field.dateOptions.dateFormat },
             ] : [],
@@ -906,7 +911,7 @@ KlesFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
         <ng-container *ngIf="field.autocomplete; else notAutoComplete">
             <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType" 
             [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
-            [matAutocomplete]="auto">
+            [matAutocomplete]="auto" [errorStateMatcher]="field.errorStateMatcher">
 
             <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
                 <ng-container *ngIf="!field.autocompleteComponent">
@@ -926,7 +931,7 @@ KlesFormInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
 
         <ng-template #notAutoComplete>
             <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
-            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step" [errorStateMatcher]="field.errorStateMatcher">
         </ng-template>
 
         <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>
@@ -954,7 +959,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         <ng-container *ngIf="field.autocomplete; else notAutoComplete">
             <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType" 
             [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
-            [matAutocomplete]="auto">
+            [matAutocomplete]="auto" [errorStateMatcher]="field.errorStateMatcher">
 
             <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
                 <ng-container *ngIf="!field.autocompleteComponent">
@@ -974,7 +979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
         <ng-template #notAutoComplete>
             <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
-            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step" [errorStateMatcher]="field.errorStateMatcher">
         </ng-template>
 
         <mat-spinner matSuffix mode="indeterminate" *ngIf="isPending()" diameter="17"></mat-spinner>
@@ -1145,7 +1150,7 @@ KlesFormSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 KlesFormSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KlesFormSelectComponent, selector: "kles-form-select", viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
         <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id"
-        (openedChange)="openChange($event)" [compareWith]="compareFn"
+        (openedChange)="openChange($event)" [compareWith]="compareFn" [errorStateMatcher]="field.errorStateMatcher"
         [ngClass]="field.ngClass" [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
         <mat-select-trigger *ngIf="field.triggerComponent">
             <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
@@ -1240,7 +1245,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ selector: 'kles-form-select', template: `
     <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
         <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id"
-        (openedChange)="openChange($event)" [compareWith]="compareFn"
+        (openedChange)="openChange($event)" [compareWith]="compareFn" [errorStateMatcher]="field.errorStateMatcher"
         [ngClass]="field.ngClass" [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
         <mat-select-trigger *ngIf="field.triggerComponent">
             <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
@@ -1345,7 +1350,7 @@ KlesFormDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ve
 KlesFormDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KlesFormDateComponent, selector: "kles-form-datepicker", usesInheritance: true, ngImport: i0, template: `
     <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
         <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder | translate"
-        [min]="field.min" [max]="field.max">
+        [min]="field.min" [max]="field.max" [errorStateMatcher]="field.errorStateMatcher">
         <div matSuffix>
             <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
             <ng-content></ng-content>
@@ -1366,7 +1371,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ selector: "kles-form-datepicker", template: `
     <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
         <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder | translate"
-        [min]="field.min" [max]="field.max">
+        [min]="field.min" [max]="field.max" [errorStateMatcher]="field.errorStateMatcher">
         <div matSuffix>
             <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
             <ng-content></ng-content>
@@ -2095,7 +2100,7 @@ KlesFormTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0"
 KlesFormTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KlesFormTextareaComponent, selector: "kles-form-textarea", usesInheritance: true, ngImport: i0, template: `
     <mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
         <textarea matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" 
-        [formControlName]="field.name" cdkTextareaAutosize [placeholder]="field.placeholder | translate"
+        [formControlName]="field.name" cdkTextareaAutosize [placeholder]="field.placeholder | translate" [errorStateMatcher]="field.errorStateMatcher"
         [cdkAutosizeMinRows]="field.textareaAutoSize?.minRows" [cdkAutosizeMaxRows]="field.textareaAutoSize?.maxRows"  [maxlength]="field.maxLength">
         </textarea>
 
@@ -2116,7 +2121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ selector: 'kles-form-textarea', template: `
     <mat-form-field [formGroup]="group" [color]="field.color" class="form-element">
         <textarea matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" 
-        [formControlName]="field.name" cdkTextareaAutosize [placeholder]="field.placeholder | translate"
+        [formControlName]="field.name" cdkTextareaAutosize [placeholder]="field.placeholder | translate" [errorStateMatcher]="field.errorStateMatcher"
         [cdkAutosizeMinRows]="field.textareaAutoSize?.minRows" [cdkAutosizeMaxRows]="field.textareaAutoSize?.maxRows"  [maxlength]="field.maxLength">
         </textarea>
 
@@ -2211,6 +2216,8 @@ class KlesFormGroup extends KlesFormControl {
                 subGroup.addControl(subfield.name, control);
             });
         }
+        subGroup.addValidators(this.bindValidations(this.field.validations || []));
+        subGroup.addAsyncValidators(this.bindAsyncValidations(this.field.asyncValidations || []));
         if (this.field.disabled) {
             subGroup.disable();
         }
@@ -2236,8 +2243,14 @@ KlesFormGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
                 </ng-container>
             </ng-container>
         </div>
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
     </div>
-`, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".group-container{display:flex;flex-direction:inherit;width:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }] });
+`, isInline: true, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".group-container{display:flex;flex-direction:inherit;width:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "directive", type: i4$2.MatError, selector: "mat-error", inputs: ["id"] }, { kind: "directive", type: KlesDynamicFieldDirective, selector: "[klesDynamicField]", inputs: ["field", "group", "siblingFields"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] });
 KlesFormGroupComponent = __decorate([
     FieldMapper({ type: EnumType.group, factory: (field) => (new KlesFormGroup(field).create()) })
 ], KlesFormGroupComponent);
@@ -2251,6 +2264,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 </ng-container>
             </ng-container>
         </div>
+        <ng-container *ngFor="let validation of field.validations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
+        <ng-container *ngFor="let validation of field.asyncValidations;" ngProjectAs="mat-error">
+            <mat-error *ngIf="group.get(field.name).hasError(validation.name)">{{validation.message | translate}}</mat-error>
+        </ng-container>
     </div>
 `, styles: ["mat-form-field{width:100%}\n", ":host{display:flex;flex-direction:inherit}\n", ".group-container{display:flex;flex-direction:inherit;width:inherit}\n"] }]
         }] });
@@ -2267,7 +2286,7 @@ KlesFormInputClearableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
         <ng-container *ngIf="field.autocomplete; else notAutoComplete">
             <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
             [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
-            [matAutocomplete]="auto">
+            [matAutocomplete]="auto" [errorStateMatcher]="field.errorStateMatcher">
 
             <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
                 <ng-container *ngIf="!field.autocompleteComponent">
@@ -2287,7 +2306,8 @@ KlesFormInputClearableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
 
         <ng-template #notAutoComplete>
             <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
-            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
+            [errorStateMatcher]="field.errorStateMatcher">
         </ng-template>
         <button *ngIf="!group.get(field.name).disabled" mat-button matSuffix mat-icon-button aria-label="Clear" type="button"
             (click)="group.controls[field.name].reset();">
@@ -2312,7 +2332,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         <ng-container *ngIf="field.autocomplete; else notAutoComplete">
             <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
             [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
-            [matAutocomplete]="auto">
+            [matAutocomplete]="auto" [errorStateMatcher]="field.errorStateMatcher">
 
             <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn.bind(this)" [panelWidth]="this.field.panelWidth">
                 <ng-container *ngIf="!field.autocompleteComponent">
@@ -2332,7 +2352,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
         <ng-template #notAutoComplete>
             <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [formControlName]="field.name" [placeholder]="field.placeholder | translate" [type]="field.inputType"
-            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step">
+            [maxLength]="field.maxLength" [min]="field.min" [max]="field.max" [step]="field.step"
+            [errorStateMatcher]="field.errorStateMatcher">
         </ng-template>
         <button *ngIf="!group.get(field.name).disabled" mat-button matSuffix mat-icon-button aria-label="Clear" type="button"
             (click)="group.controls[field.name].reset();">
@@ -2530,7 +2551,7 @@ KlesFormSelectSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.
 KlesFormSelectSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KlesFormSelectSearchComponent, selector: "kles-form-select-search", viewQueries: [{ propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "options", predicate: MatOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `
     <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
         <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
-        (openedChange)="openChange($event)" [compareWith]="compareFn"
+        (openedChange)="openChange($event)" [compareWith]="compareFn" [errorStateMatcher]="field.errorStateMatcher"
         [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
         <mat-select-trigger *ngIf="field.triggerComponent">
             <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
@@ -2636,7 +2657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ selector: 'kles-form-select-search', template: `
     <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
         <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
-        (openedChange)="openChange($event)" [compareWith]="compareFn"
+        (openedChange)="openChange($event)" [compareWith]="compareFn" [errorStateMatcher]="field.errorStateMatcher"
         [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
         <mat-select-trigger *ngIf="field.triggerComponent">
             <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
@@ -3207,7 +3228,7 @@ KlesFormSelectLazySearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion:
 KlesFormSelectLazySearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KlesFormSelectLazySearchComponent, selector: "kles-form-select-lazy-search", usesInheritance: true, ngImport: i0, template: `
     <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
         <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
-        (openedChange)="openChange($event)" [compareWith]="compareFn"
+        (openedChange)="openChange($event)" [compareWith]="compareFn" [errorStateMatcher]="field.errorStateMatcher"
         [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
         <mat-select-trigger *ngIf="field.triggerComponent">
             <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
@@ -3313,7 +3334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ selector: 'kles-form-select-lazy-search', template: `
     <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
         <mat-select matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass"
-        (openedChange)="openChange($event)" [compareWith]="compareFn"
+        (openedChange)="openChange($event)" [compareWith]="compareFn" [errorStateMatcher]="field.errorStateMatcher"
         [placeholder]="field.placeholder | translate" [formControlName]="field.name" [multiple]="field.multiple">
         <mat-select-trigger *ngIf="field.triggerComponent">
             <ng-container klesComponent [component]="field.triggerComponent" [value]="group.controls[field.name].value" [field]="field"></ng-container>
@@ -3426,7 +3447,7 @@ KlesFormDateTimeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0"
 KlesFormDateTimeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: KlesFormDateTimeComponent, selector: "kles-form-datetimepicker", usesInheritance: true, ngImport: i0, template: `
     <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
         <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder | translate"
-        [min]="field.min" [max]="field.max">
+        [min]="field.min" [max]="field.max" [errorStateMatcher]="field.errorStateMatcher">
         <div matSuffix>
             <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
             <ng-content></ng-content>
@@ -3447,7 +3468,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ selector: "kles-form-datetimepicker", template: `
     <mat-form-field class="margin-top" [color]="field.color" [formGroup]="group">
         <input matInput matTooltip="{{field.tooltip}}" [attr.id]="field.id" [ngClass]="field.ngClass" [matDatepicker]="picker" [formControlName]="field.name" [placeholder]="field.placeholder | translate"
-        [min]="field.min" [max]="field.max">
+        [min]="field.min" [max]="field.max" [errorStateMatcher]="field.errorStateMatcher">
         <div matSuffix>
             <mat-datepicker-toggle [for]="picker"></mat-datepicker-toggle>
             <ng-content></ng-content>