@esfaenza/forms-and-validations 11.2.147 → 11.2.149

package/bundles/esfaenza-forms-and-validations.umd.js

@@ -476,7 +476,9 @@
      * Nota bene: I tooltip rallentano tantissimo la pagina perché il tizio che ha fatto ngx bootstrap non è capace
      */
     var BaseValidation = /** @class */ (function () {
-        function BaseValidation() {
+        /** @ignore Constructor */
+        function BaseValidation(cdr) {
+            this.cdr = cdr;
             /**
              * Variabile per tenere in memoria il fatto che il componente è forzato a invalido o no
              */
@@ -628,6 +630,7 @@
                         _this.baseInput.control.setErrors({ forcedtoinvalid: true });
                         _this.baseInput.control.markAsTouched();
                         _this.baseInput.control.markAsDirty();
+                        _this.cdr.detectChanges();
                     });
                 else
                     setTimeout(function () {
@@ -666,8 +669,12 @@
          */
         BaseValidation.prototype.showTooltipWithMessage = function (messageOverride) {
             if (messageOverride === void 0) { messageOverride = null; }
-            this.validationFailed = messageOverride || this.validationFailed || (this.InferErrorMessages ? this.inferMessage() : "");
-            if (this.validationFailed)
+            // Aggiorno il messaggio di validazione solo se il valore è diverso dall'ultimo valore ricevuto
+            if (this.valueOnLastValidation != this.baseInput.value) {
+                this.validationFailedBind = messageOverride || this.validationFailed || (this.InferErrorMessages ? this.inferMessage() : "");
+                this.valueOnLastValidation = this.baseInput.value;
+            }
+            if (this.validationFailedBind)
                 this.tooltip.show();
         };
         /**
@@ -747,6 +754,9 @@
     BaseValidation.decorators = [
         { type: core.Directive }
     ];
+    BaseValidation.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef }
+    ]; };
     BaseValidation.propDecorators = {
         tooltip: [{ type: core.ViewChild, args: [tooltip.TooltipDirective, { static: false },] }],
         tooltip_static: [{ type: core.ViewChild, args: [tooltip.TooltipDirective, { static: true },] }],
@@ -809,20 +819,19 @@
          * @ignore
          */
         function ValidationSelectComponent(_validators, _asyncValidators, injector, cdr, lc) {
-            var _this = _super.call(this) || this;
+            var _this = _super.call(this, cdr) || this;
             _this._validators = _validators;
             _this._asyncValidators = _asyncValidators;
             _this.injector = injector;
-            _this.cdr = cdr;
             _this.lc = lc;
             /**
              * valore del campo vuoto della select
              */
-            _this.emptyFieldValue = "-2";
+            _this.emptyFieldValue = "-2000";
             /**
              * Valore del placeholder
              */
-            _this.placeHolderValue = "-1";
+            _this.placeHolderValue = "-1000";
             /**
              * Per i componenti non obbligatori indica se fornire un "valore vuoto"
              */
@@ -937,7 +946,7 @@
     ValidationSelectComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "val-select",
-                    template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <select matNativeControl\r\n            #baseInput=\"ngModel\"\r\n            #htmlInput\r\n            name=\"val-select\"\r\n            class=\"form-control\"\r\n            triggers=\"\"\r\n            placement=\"top\"\r\n            id=\"{{id}}\"\r\n            [customRequired]=\"required ? 'true' : 'false'\"\r\n            [CustomNullValues]=\"[placeHolderValue,emptyFieldValue]\"\r\n            [(ngModel)]=\"value\"\r\n            [tooltip]=\"tolTemplate\"\r\n            [class.checking-combo]=\"!noValidate\"\r\n            [class.app-option-placeholder]=\"baseInput.value === placeHolderValue\"\r\n            [class.no-bg-img]=\"!showValidationSymbol\"\r\n            [disabled]=\"readonly\"\r\n            (click)=\"onFocus($event)\"\r\n            (focus)=\"checkTooltip();\"\r\n            (blur)=\"closeTooltip(); onBlur.emit(true);\"\r\n            (ngModelChange)=\"onModelChange($event); onFinalize()\">\r\n\r\n        <option *ngIf=\"placeholder\" [value]=\"placeHolderValue\" disabled selected hidden>{{placeholder}}</option>\r\n        <option *ngIf=\"required == false && emptyValue\" [value]=\"emptyFieldValue\"></option>\r\n        <ng-content></ng-content>\r\n    </select>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                    template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <select matNativeControl\r\n            #baseInput=\"ngModel\"\r\n            #htmlInput\r\n            name=\"val-select\"\r\n            class=\"form-control\"\r\n            triggers=\"\"\r\n            placement=\"top\"\r\n            id=\"{{id}}\"\r\n            [customRequired]=\"required ? 'true' : 'false'\"\r\n            [CustomNullValues]=\"[placeHolderValue,emptyFieldValue]\"\r\n            [(ngModel)]=\"value\"\r\n            [tooltip]=\"tolTemplate\"\r\n            [class.checking-combo]=\"!noValidate\"\r\n            [class.app-option-placeholder]=\"baseInput.value === placeHolderValue\"\r\n            [class.no-bg-img]=\"!showValidationSymbol\"\r\n            [disabled]=\"readonly\"\r\n            (click)=\"onFocus($event)\"\r\n            (focus)=\"checkTooltip();\"\r\n            (blur)=\"closeTooltip(); onBlur.emit(true);\"\r\n            (ngModelChange)=\"onModelChange($event); onFinalize()\">\r\n\r\n        <option *ngIf=\"placeholder\" [value]=\"placeHolderValue\" disabled selected hidden>{{placeholder}}</option>\r\n        <option *ngIf=\"required == false && emptyValue\" [value]=\"emptyFieldValue\"></option>\r\n        <ng-content></ng-content>\r\n    </select>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     providers: [
@@ -976,8 +985,7 @@
          * @ignore
          */
         function ValidationDateComponent(cdr, _validators, _asyncValidators, injector, lc, dateExts) {
-            var _this = _super.call(this) || this;
-            _this.cdr = cdr;
+            var _this = _super.call(this, cdr) || this;
             _this._validators = _validators;
             _this._asyncValidators = _asyncValidators;
             _this.injector = injector;
@@ -1111,7 +1119,7 @@
     ValidationDateComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "val-date",
-                    template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n    <input matInput\r\n           [matDatepicker]=\"datepicker\"\r\n           #baseInput=\"ngModel\"\r\n           #htmlInput\r\n           type=\"text\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           name=\"val-date\"\r\n           class=\"form-control {{class}}\"\r\n           autocomplete=\"{{autocomplete}}\"\r\n           id=\"{{id}}\"\r\n           (click)=\"onFocus($event)\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [placeholder]=\"placeholder ? (FloatingLabel ? undefined : placeholder) : _format\"\r\n           [disabled]=\"readonly || disabled\"\r\n           [isDisabled]=\"readonly || disabled\"\r\n           (dateChange)=\"outputValue($event); onFinalize();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n           (blur)=\"closeTooltip();\"\r\n           />\r\n    <mat-datepicker-toggle matSuffix [for]=\"datepicker\"></mat-datepicker-toggle>\r\n    <mat-datepicker #datepicker></mat-datepicker>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                    template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n    <input matInput\r\n           [matDatepicker]=\"datepicker\"\r\n           #baseInput=\"ngModel\"\r\n           #htmlInput\r\n           type=\"text\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           name=\"val-date\"\r\n           class=\"form-control {{class}}\"\r\n           autocomplete=\"{{autocomplete}}\"\r\n           id=\"{{id}}\"\r\n           (click)=\"onFocus($event)\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [placeholder]=\"placeholder ? (FloatingLabel ? undefined : placeholder) : _format\"\r\n           [disabled]=\"readonly || disabled\"\r\n           [isDisabled]=\"readonly || disabled\"\r\n           (dateChange)=\"outputValue($event); onFinalize();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n           (blur)=\"closeTooltip();\"\r\n           />\r\n    <mat-datepicker-toggle matSuffix [for]=\"datepicker\"></mat-datepicker-toggle>\r\n    <mat-datepicker #datepicker></mat-datepicker>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     providers: [
@@ -1146,8 +1154,7 @@
          * @ignore
          */
         function ValidationInputComponent(cdr, _validators, _asyncValidators, injector, lc) {
-            var _this = _super.call(this) || this;
-            _this.cdr = cdr;
+            var _this = _super.call(this, cdr) || this;
             _this._validators = _validators;
             _this._asyncValidators = _asyncValidators;
             _this.injector = injector;
@@ -1298,7 +1305,7 @@
     ValidationInputComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "val-input",
-                    template: "<mat-form-field floatLabel=\"never\" appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label [class.app-margin-left-25]=\"HasPrefix\" *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n    <ng-container *ngIf=\"HasPrefix\">\r\n        <ng-container *ngTemplateOutlet=\"prefix_internal\"></ng-container>\r\n    </ng-container>\r\n\r\n    <!-- Bisogna fixare un po' l'uso di readonly, disabled, frozen cazzi e mazzi -->\r\n    <input matInput\r\n           #baseInput='ngModel'\r\n           #htmlInput\r\n           type=\"{{type}}\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           autocomplete=\"{{autocomplete}}\"\r\n           name=\"val-input\"\r\n           class=\"form-control {{class}}\"\r\n           id=\"{{id}}\"\r\n           [class.app-margin-left-25]=\"HasPrefix\"\r\n           [class.mat-input-with-suffix]=\"HasSuffix || Password || showWarning\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate && !showWarning\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [readonly]=\"Frozen\"\r\n           [disabled]=\"readonly || disabled\"\r\n           [placeholder]=\"FloatingLabel ? undefined : placeholder\"\r\n           (ngModelChange)=\"onModelChange($event)\"\r\n           (click)=\"onFocus($event)\"\r\n           (focus)=\"checkTooltip();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n           (blur)=\"closeTooltip(); onFinalize();\"\r\n           >\r\n    <ng-container *ngIf=\"HasSuffix || Password || showWarning\">\r\n        <ng-container *ngIf=\"!Password && !showWarning\">\r\n            <ng-container *ngTemplateOutlet=\"suffix_internal\"></ng-container>\r\n        </ng-container>\r\n\r\n        <span class=\"form-input-suffix\" *ngIf=\"Password || showWarning\">\r\n            <ng-container *ngIf=\"Password\" matSuffix>\r\n                <a *ngIf=\"passShown\" class=\"fa fa-eye-slash app-fs-16 app-pointer\" (click)=\"type = 'password'; passShown = !passShown; $event.preventDefault()\"></a>\r\n                <a *ngIf=\"!passShown\" class=\"fa fa-eye app-fs-16 app-pointer\" (click)=\"type = 'text'; passShown = !passShown; $event.preventDefault()\"></a>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"showWarning\" matSuffix>\r\n                <span title=\"{{warningTitle}}\" class=\"{{warningClass}} text-warning app-fs-16\"></span>\r\n            </ng-container>\r\n        </span>\r\n    </ng-container>\r\n</mat-form-field>\r\n\r\n<!-- Questo compoennte nascosto serve solamente per assicurarsi che angular carichi gli stili dei mat-button che altrimenti non caricherebbe... dunno why -->\r\n<div hidden><mat-datepicker-toggle></mat-datepicker-toggle></div>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                    template: "<mat-form-field floatLabel=\"never\" appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label [class.app-margin-left-25]=\"HasPrefix\" *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n    <ng-container *ngIf=\"HasPrefix\">\r\n        <ng-container *ngTemplateOutlet=\"prefix_internal\"></ng-container>\r\n    </ng-container>\r\n\r\n    <!-- Bisogna fixare un po' l'uso di readonly, disabled, frozen cazzi e mazzi -->\r\n    <input matInput\r\n           #baseInput='ngModel'\r\n           #htmlInput\r\n           type=\"{{type}}\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           autocomplete=\"{{autocomplete}}\"\r\n           name=\"val-input\"\r\n           class=\"form-control {{class}}\"\r\n           id=\"{{id}}\"\r\n           [class.app-margin-left-25]=\"HasPrefix\"\r\n           [class.mat-input-with-suffix]=\"HasSuffix || Password || showWarning\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate && !showWarning\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [readonly]=\"Frozen\"\r\n           [disabled]=\"readonly || disabled\"\r\n           [placeholder]=\"FloatingLabel ? undefined : placeholder\"\r\n           (ngModelChange)=\"onModelChange($event)\"\r\n           (click)=\"onFocus($event)\"\r\n           (focus)=\"checkTooltip();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n           (blur)=\"closeTooltip(); onFinalize();\"\r\n           >\r\n    <ng-container *ngIf=\"HasSuffix || Password || showWarning\">\r\n        <ng-container *ngIf=\"!Password && !showWarning\">\r\n            <ng-container *ngTemplateOutlet=\"suffix_internal\"></ng-container>\r\n        </ng-container>\r\n\r\n        <span class=\"form-input-suffix\" *ngIf=\"Password || showWarning\">\r\n            <ng-container *ngIf=\"Password\" matSuffix>\r\n                <a *ngIf=\"passShown\" class=\"fa fa-eye-slash app-fs-16 app-pointer\" (click)=\"type = 'password'; passShown = !passShown; $event.preventDefault()\"></a>\r\n                <a *ngIf=\"!passShown\" class=\"fa fa-eye app-fs-16 app-pointer\" (click)=\"type = 'text'; passShown = !passShown; $event.preventDefault()\"></a>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"showWarning\" matSuffix>\r\n                <span title=\"{{warningTitle}}\" class=\"{{warningClass}} text-warning app-fs-16\"></span>\r\n            </ng-container>\r\n        </span>\r\n    </ng-container>\r\n</mat-form-field>\r\n\r\n<!-- Questo compoennte nascosto serve solamente per assicurarsi che angular carichi gli stili dei mat-button che altrimenti non caricherebbe... dunno why -->\r\n<div hidden><mat-datepicker-toggle></mat-datepicker-toggle></div>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     providers: [
                         { provide: localizations.LocalizationService, useClass: BaseValidationLoc },
@@ -1362,7 +1369,7 @@
     ValidationCurrencyComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "val-currency",
-                    template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n    <input #baseInput='ngModel'\r\n           #htmlInput\r\n           currencyMask\r\n           matInput\r\n           [readonly]=\"readonly\"\r\n           [options]='CurrencyOptions'\r\n           [(ngModel)]=\"value\"\r\n           name=\"val-input\"\r\n           id=\"{{id}}\"\r\n           [placeholder]=\"FloatingLabel ? undefined : placeholder\"\r\n           (click)=\"onFocus($event)\"\r\n           (focus)=\"checkTooltip();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n           (blur)=\"closeTooltip(); onFinalize();\"\r\n           class=\"form-control {{class}}\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           (ngModelChange)=\"onModelChange($event)\"\r\n           type=\"{{type}}\"\r\n           [tooltip]=\"tolTemplate\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           autocomplete=\"{{autocomplete}}\" />\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div>\r\n        <span class=\"close-button pull-right\" (click)=\"closeTooltip()\" aria-label=\"Close\">\r\n            <span aria-hidden=\"true\">&times;</span>\r\n        </span>\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                    template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n    <input #baseInput='ngModel'\r\n           #htmlInput\r\n           currencyMask\r\n           matInput\r\n           [readonly]=\"readonly\"\r\n           [options]='CurrencyOptions'\r\n           [(ngModel)]=\"value\"\r\n           name=\"val-input\"\r\n           id=\"{{id}}\"\r\n           [placeholder]=\"FloatingLabel ? undefined : placeholder\"\r\n           (click)=\"onFocus($event)\"\r\n           (focus)=\"checkTooltip();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n           (blur)=\"closeTooltip(); onFinalize();\"\r\n           class=\"form-control {{class}}\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           (ngModelChange)=\"onModelChange($event)\"\r\n           type=\"{{type}}\"\r\n           [tooltip]=\"tolTemplate\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           autocomplete=\"{{autocomplete}}\" />\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div>\r\n        <span class=\"close-button pull-right\" (click)=\"closeTooltip()\" aria-label=\"Close\">\r\n            <span aria-hidden=\"true\">&times;</span>\r\n        </span>\r\n        <span>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     providers: [
                         { provide: localizations.LocalizationService, useClass: BaseValidationLoc },
@@ -1423,7 +1430,7 @@
     ValidationTextAreaComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "val-textarea",
-                    template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-full-height mat-no-border-top mat-height-auto\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n    <textarea matInput\r\n              #baseInput=\"ngModel\"\r\n              #htmlInput\r\n              [(ngModel)]=\"value\"\r\n              name=\"val-textarea\"\r\n              triggers=\"\"\r\n              class=\"app-no-resize form-control {{class}}\"\r\n              id=\"{{id}}\"\r\n              [class.checking-field]=\"!noValidate\"\r\n              rows=\"{{rows}}\"\r\n              [tooltip]=\"tolTemplate\"\r\n              [placeholder]=\"FloatingLabel ? undefined : placeholder\"\r\n              placement=\"top\"\r\n              (click)=\"onFocus($event)\"\r\n              (focus)=\"checkTooltip();\"\r\n              (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n              (blur)=\"closeTooltip(); onFinalize();\"\r\n              (ngModelChange)=\"onModelChange($event)\">\r\n    </textarea>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                    template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-full-height mat-no-border-top mat-height-auto\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n    <textarea matInput\r\n              #baseInput=\"ngModel\"\r\n              #htmlInput\r\n              [(ngModel)]=\"value\"\r\n              name=\"val-textarea\"\r\n              triggers=\"\"\r\n              class=\"app-no-resize form-control {{class}}\"\r\n              id=\"{{id}}\"\r\n              [class.checking-field]=\"!noValidate\"\r\n              rows=\"{{rows}}\"\r\n              [tooltip]=\"tolTemplate\"\r\n              [placeholder]=\"FloatingLabel ? undefined : placeholder\"\r\n              placement=\"top\"\r\n              (click)=\"onFocus($event)\"\r\n              (focus)=\"checkTooltip();\"\r\n              (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n              (blur)=\"closeTooltip(); onFinalize();\"\r\n              (ngModelChange)=\"onModelChange($event)\">\r\n    </textarea>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                     providers: [
                         { provide: localizations.LocalizationService, useClass: BaseValidationLoc },
                         {
@@ -1457,8 +1464,7 @@
          * @ignore
          */
         function ValidationDateTimeComponent(cdr, _validators, _asyncValidators, injector, lc, dateExts) {
-            var _this = _super.call(this) || this;
-            _this.cdr = cdr;
+            var _this = _super.call(this, cdr) || this;
             _this._validators = _validators;
             _this._asyncValidators = _asyncValidators;
             _this.injector = injector;
@@ -1620,7 +1626,7 @@
     ValidationDateTimeComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "val-datetime",
-                    template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n\r\n    <input matInput \r\n           [ngxMatDatetimePicker]=\"datepicker\" \r\n           #baseInput=\"ngModel\"\r\n           #htmlInput\r\n           type=\"text\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           name=\"val-date\"\r\n           id=\"{{id}}\"\r\n           (click)=\"onFocus($event)\"\r\n           class=\"form-control {{class}}\"\r\n           autocomplete=\"{{autocomplete}}\"\r\n           [placeholder]=\"FloatingLabel ? undefined : placeholder\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [placeholder]=\"placeholder ? '' : _format\"\r\n           [disabled]=\"readonly || disabled\"\r\n           [isDisabled]=\"readonly || disabled\"\r\n           (dateChange)=\"outputValue($event); onFinalize();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n           (blur)=\"closeTooltip();\"\r\n           />\r\n\r\n  <mat-datepicker-toggle matSuffix [for]=\"datepicker\"></mat-datepicker-toggle>\r\n\r\n  <ngx-mat-datetime-picker #datepicker \r\n            [showSpinners]=\"showSpinners\" \r\n            [showSeconds]=\"showSeconds\" \r\n            [stepHour]=\"stepHour\" \r\n            [stepMinute]=\"stepMinute\" \r\n            [stepSecond]=\"stepSecond\" \r\n            [touchUi]=\"false\" \r\n            [color]=\"'primary'\">\r\n  </ngx-mat-datetime-picker>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                    template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"placeholder && FloatingLabel\">{{placeholder}}</mat-label>\r\n\r\n    <input matInput \r\n           [ngxMatDatetimePicker]=\"datepicker\" \r\n           #baseInput=\"ngModel\"\r\n           #htmlInput\r\n           type=\"text\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           name=\"val-date\"\r\n           id=\"{{id}}\"\r\n           (click)=\"onFocus($event)\"\r\n           class=\"form-control {{class}}\"\r\n           autocomplete=\"{{autocomplete}}\"\r\n           [placeholder]=\"FloatingLabel ? undefined : placeholder\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [placeholder]=\"placeholder ? '' : _format\"\r\n           [disabled]=\"readonly || disabled\"\r\n           [isDisabled]=\"readonly || disabled\"\r\n           (dateChange)=\"outputValue($event); onFinalize();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n           (blur)=\"closeTooltip();\"\r\n           />\r\n\r\n  <mat-datepicker-toggle matSuffix [for]=\"datepicker\"></mat-datepicker-toggle>\r\n\r\n  <ngx-mat-datetime-picker #datepicker \r\n            [showSpinners]=\"showSpinners\" \r\n            [showSeconds]=\"showSeconds\" \r\n            [stepHour]=\"stepHour\" \r\n            [stepMinute]=\"stepMinute\" \r\n            [stepSecond]=\"stepSecond\" \r\n            [touchUi]=\"false\" \r\n            [color]=\"'primary'\">\r\n  </ngx-mat-datetime-picker>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     providers: [
@@ -1652,8 +1658,8 @@
     var ValidationAutocompleteComponent = /** @class */ (function (_super) {
         __extends(ValidationAutocompleteComponent, _super);
         /** @ignore */
-        function ValidationAutocompleteComponent(_validators, _asyncValidators, injector, lc) {
-            var _this = _super.call(this) || this;
+        function ValidationAutocompleteComponent(cdr, _validators, _asyncValidators, injector, lc) {
+            var _this = _super.call(this, cdr) || this;
             _this._validators = _validators;
             _this._asyncValidators = _asyncValidators;
             _this.injector = injector;
@@ -1747,7 +1753,7 @@
     ValidationAutocompleteComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "val-autocomplete",
-                    template: "<!-- Val-Model: {{value}} -->\r\n<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <input matInput\r\n           #htmlInput\r\n           #baseInput='ngModel'\r\n           type=\"text\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           placeholder=\"{{placeholder}}\"\r\n           [matAutocomplete]=\"auto\"\r\n           name=\"val-input\"\r\n           id=\"{{id}}\"\r\n           class=\"form-control {{class}}\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [disabled]=\"readonly || disabled\"\r\n           (ngModelChange)=\"onModelChange($event)\"\r\n           (click)=\"onFocus($event)\"\r\n           (focus)=\"checkTooltip();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n           (blur)=\"closeTooltip(); onFinalize();\">\r\n\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n        <mat-option *ngFor=\"let option of FilteredSource\" [value]=\"option.id\">\r\n            {{option.description}}\r\n        </mat-option>\r\n    </mat-autocomplete>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                    template: "<!-- Val-Model: {{value}} -->\r\n<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top mat-height-fixed\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <input matInput\r\n           #htmlInput\r\n           #baseInput='ngModel'\r\n           type=\"text\"\r\n           triggers=\"\"\r\n           placement=\"top\"\r\n           placeholder=\"{{placeholder}}\"\r\n           [matAutocomplete]=\"auto\"\r\n           name=\"val-input\"\r\n           id=\"{{id}}\"\r\n           class=\"form-control {{class}}\"\r\n           [(ngModel)]=\"value\"\r\n           [class.checking-field]=\"!noValidate\"\r\n           [tooltip]=\"tolTemplate\"\r\n           [disabled]=\"readonly || disabled\"\r\n           (ngModelChange)=\"onModelChange($event)\"\r\n           (click)=\"onFocus($event)\"\r\n           (focus)=\"checkTooltip();\"\r\n           (keyup)=\"($event.keyCode == 13 || $event.keyCode == 27) && onFinalize();\"\r\n           (blur)=\"closeTooltip(); onFinalize();\">\r\n\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n        <mat-option *ngFor=\"let option of FilteredSource\" [value]=\"option.id\">\r\n            {{option.description}}\r\n        </mat-option>\r\n    </mat-autocomplete>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     providers: [
                         { provide: localizations.LocalizationService, useClass: BaseValidationLoc },
@@ -1762,6 +1768,7 @@
                 },] }
     ];
     ValidationAutocompleteComponent.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef },
         { type: Array, decorators: [{ type: core.Optional }, { type: core.Inject, args: [forms.NG_VALIDATORS,] }] },
         { type: Array, decorators: [{ type: core.Optional }, { type: core.Inject, args: [forms.NG_ASYNC_VALIDATORS,] }] },
         { type: core.Injector },
@@ -1780,8 +1787,8 @@
     var ValidationAutocompleteMultiComponent = /** @class */ (function (_super) {
         __extends(ValidationAutocompleteMultiComponent, _super);
         /** @ignore */
-        function ValidationAutocompleteMultiComponent(_validators, _asyncValidators, injector, lc) {
-            var _this = _super.call(this) || this;
+        function ValidationAutocompleteMultiComponent(cdr, _validators, _asyncValidators, injector, lc) {
+            var _this = _super.call(this, cdr) || this;
             _this._validators = _validators;
             _this._asyncValidators = _asyncValidators;
             _this.injector = injector;
@@ -1934,7 +1941,7 @@
     ValidationAutocompleteMultiComponent.decorators = [
         { type: core.Component, args: [{
                     selector: "val-autocomplete-multi",
-                    template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <mat-chip-list #chipList>\r\n        <ng-container *ngIf=\"selectData.length < ChipThreshold\" >\r\n            <mat-chip *ngFor=\"let select of selectData\" class=\"cardinal-colors\" (click)=\"!(readonly || disabled) && removeChip(select)\">\r\n                {{ select.description }}\r\n                <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n            </mat-chip>\r\n        </ng-container>\r\n\r\n        <mat-chip *ngIf=\"selectData.length >= ChipThreshold\" class=\"cardinal-colors\" (click)=\"!(readonly || disabled) && removeChip(null)\">\r\n            {{ selectData.length }} {{ 'Elements selected' | localize: lc }}\r\n            <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n        </mat-chip>\r\n\r\n        <input matInput\r\n            [matChipInputFor]=\"chipList\"\r\n            #htmlInput\r\n            #baseInput='ngModel'\r\n            type=\"text\"\r\n            triggers=\"\"\r\n            placement=\"top\"\r\n            [placeholder]=\"placeholder\"\r\n            [matAutocomplete]=\"auto\"\r\n            name=\"val-input\"\r\n            id=\"{{id}}\"\r\n            [(ngModel)]=\"value\"\r\n            [tooltip]=\"tolTemplate\"\r\n            [disabled]=\"readonly || disabled\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (click)=\"onFocus($event)\"\r\n            (focus)=\"checkTooltip();\"\r\n            (blur)=\"closeTooltip();\">\r\n    </mat-chip-list>\r\n\r\n    <mat-autocomplete #auto=\"matAutocomplete\"  [displayWith]=\"displayFn\">\r\n        <mat-option *ngFor=\"let data of FilteredSource\">\r\n            <div (click)=\"toggleSelection(data); !HideChoicesOnSelection && $event.stopPropagation()\">\r\n                <mat-checkbox [checked]=\"data.selected\" (change)=\"toggleSelection(data);\" (click)=\"!HideChoicesOnSelection && $event.stopPropagation()\">\r\n                  {{ data.description }}\r\n                </mat-checkbox>\r\n              </div>\r\n        </mat-option>\r\n    </mat-autocomplete>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailed}}</span>\r\n    </div>\r\n</ng-template>",
+                    template: "<mat-form-field appearance=\"{{FieldAppearence}}\" class=\"mat-full-width mat-no-border-top\" [style.width.px]=\"widthPx\">\r\n    <mat-label *ngIf=\"label\">{{label}}</mat-label>\r\n    <mat-chip-list #chipList>\r\n        <ng-container *ngIf=\"selectData.length < ChipThreshold\" >\r\n            <mat-chip *ngFor=\"let select of selectData\" class=\"cardinal-colors\" (click)=\"!(readonly || disabled) && removeChip(select)\">\r\n                {{ select.description }}\r\n                <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n            </mat-chip>\r\n        </ng-container>\r\n\r\n        <mat-chip *ngIf=\"selectData.length >= ChipThreshold\" class=\"cardinal-colors\" (click)=\"!(readonly || disabled) && removeChip(null)\">\r\n            {{ selectData.length }} {{ 'Elements selected' | localize: lc }}\r\n            <mat-icon class=\"mat-chip-remove\">cancel</mat-icon>\r\n        </mat-chip>\r\n\r\n        <input matInput\r\n            [matChipInputFor]=\"chipList\"\r\n            #htmlInput\r\n            #baseInput='ngModel'\r\n            type=\"text\"\r\n            triggers=\"\"\r\n            placement=\"top\"\r\n            [placeholder]=\"placeholder\"\r\n            [matAutocomplete]=\"auto\"\r\n            name=\"val-input\"\r\n            id=\"{{id}}\"\r\n            [(ngModel)]=\"value\"\r\n            [tooltip]=\"tolTemplate\"\r\n            [disabled]=\"readonly || disabled\"\r\n            (ngModelChange)=\"onModelChange($event)\"\r\n            (click)=\"onFocus($event)\"\r\n            (focus)=\"checkTooltip();\"\r\n            (blur)=\"closeTooltip();\">\r\n    </mat-chip-list>\r\n\r\n    <mat-autocomplete #auto=\"matAutocomplete\"  [displayWith]=\"displayFn\">\r\n        <mat-option *ngFor=\"let data of FilteredSource\">\r\n            <div (click)=\"toggleSelection(data); !HideChoicesOnSelection && $event.stopPropagation()\">\r\n                <mat-checkbox [checked]=\"data.selected\" (change)=\"toggleSelection(data);\" (click)=\"!HideChoicesOnSelection && $event.stopPropagation()\">\r\n                  {{ data.description }}\r\n                </mat-checkbox>\r\n              </div>\r\n        </mat-option>\r\n    </mat-autocomplete>\r\n</mat-form-field>\r\n\r\n<ng-template #tolTemplate>\r\n    <div (click)=\"closeTooltip()\">\r\n        <span>{{validationFailedBind}}</span>\r\n    </div>\r\n</ng-template>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     providers: [
                         { provide: localizations.LocalizationService, useClass: BaseValidationLoc },
@@ -1949,6 +1956,7 @@
                 },] }
     ];
     ValidationAutocompleteMultiComponent.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef },
         { type: Array, decorators: [{ type: core.Optional }, { type: core.Inject, args: [forms.NG_VALIDATORS,] }] },
         { type: Array, decorators: [{ type: core.Optional }, { type: core.Inject, args: [forms.NG_ASYNC_VALIDATORS,] }] },
         { type: core.Injector },
@@ -2074,6 +2082,7 @@
             this.BindCheckingGroups = [];
             /** Cache delle proprietà scritte tipo --> {prop} */
             this.BindProperties = [];
+            this.destroyed$ = new rxjs.Subject();
             if (ngControl == null) {
                 if (!this.handleNullNgControl())
                     console.error("ngControl nullo per qualche motivo! Il 90% delle funzionalità di questo input saranno disabilitate");
@@ -2271,6 +2280,17 @@
                     return origFunc_1.apply(formOutsideRef);
                 };
             }
+            if (this.SetValidationSubject) {
+                this.SetValidationSubject.pipe(operators.takeUntil(this.destroyed$)).subscribe(function (v) {
+                    if (v.fieldName + "_internal" == _this.GeneratedName) {
+                        var control = _this.Form.getControl(_this.validationControl);
+                        control.setErrors({ forcedtoinvalid: true });
+                        control.markAsTouched();
+                        _this.ngControl.control.setErrors({ forcedtoinvalid: true });
+                        _this.ngControl.control.markAsTouched();
+                    }
+                });
+            }
         };
         /**
          * Se sono in modalità detatched devo rimuovere manualmente questo controllo quando entro nella dispose, altrimenti se poi ne andassi a riaggiungere
@@ -2279,6 +2299,8 @@
         BaseFormControl.prototype.ngOnDestroy = function () {
             if (this.Form && this.validationControl && !!this.Form.getControl(this.validationControl))
                 this.Form.removeControl(this.validationControl);
+            this.destroyed$.next();
+            this.destroyed$.complete();
         };
         /** Elabora i validatori iniettati e capisce se il valore è obbligatorio o meno */
         BaseFormControl.prototype.checkRequiredValidator = function () {
@@ -3419,7 +3441,7 @@
              *
              * Si consiglia di mantenere il default
              */
-            _this.EmptyFieldValue = '-2';
+            _this.EmptyFieldValue = '-2000';
             /** Se **true** rimuove il simbolino di validazione (croce rossa o tick verde) */
             _this.ShowValidationSymbol = true;
             /** Template per la visualizzazione delle opzioni */