From 05f2d72cd9651d5977c34594cdc7d6e9ce6f2b9e Mon Sep 17 00:00:00 2001
From: Antonino Bonanno <bonanno@net-serv.it>
Date: Wed, 15 Mar 2023 13:47:43 +0100
Subject: [PATCH] fix: mark all as touched on form components

---
 .../lib/abstracts/abstract-form.component.ts  | 21 ++++++++++++++++---
 ...l-driven-validation-example.component.html |  5 ++++-
 ...del-driven-validation-example.component.ts |  3 +++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/projects/design-angular-kit/src/lib/abstracts/abstract-form.component.ts b/projects/design-angular-kit/src/lib/abstracts/abstract-form.component.ts
index 911b6b6c..fdc170a6 100644
--- a/projects/design-angular-kit/src/lib/abstracts/abstract-form.component.ts
+++ b/projects/design-angular-kit/src/lib/abstracts/abstract-form.component.ts
@@ -128,11 +128,26 @@ export abstract class AbstractFormComponent<T = any> extends AbstractComponent i
    * Fired to check if form control is touched
    */
   ngDoCheck() {
-    if (this.control.touched) {
+    if (!this._ngControl?.control) {
       return;
     }
-    if (this._ngControl?.control?.touched) {
-      this.control.markAsTouched();
+
+    const ngControl = this._ngControl.control;
+    if (this.control.touched !== ngControl.touched) {
+      if (ngControl.touched) {
+        this.control.markAsTouched();
+      } else {
+        this.control.markAsUntouched();
+      }
+      this._changeDetectorRef.detectChanges();
+    }
+    if (this.control.pristine !== ngControl.pristine) {
+      if (ngControl.pristine) {
+        this.control.markAsPristine();
+      } else {
+        this.control.markAsDirty();
+      }
+      this._changeDetectorRef.detectChanges();
     }
   }
 
diff --git a/src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.html b/src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.html
index 192d9342..e5ef9f50 100644
--- a/src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.html
+++ b/src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.html
@@ -38,7 +38,10 @@ <h3>Interazione con Form Input dotato di validazione Model Driven</h3>
       </div>
     </div>
 
-    <button itButton="primary" [disabled]="!myForm.valid" (click)="save(myForm)">Salva</button>
+    <div class="d-flex justify-content-between">
+      <button itButton="primary" [disabled]="!myForm.valid" (click)="save(myForm)">Salva</button>
+      <button itButton="secondary" type="button" (click)="markAllAsTouched()">Valida</button>
+    </div>
 
     <div *ngIf="savedValue">Salvato `{{savedValue}}`</div>
   </form>
diff --git a/src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.ts b/src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.ts
index cc951da8..431cc69a 100644
--- a/src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.ts
+++ b/src/app/form-input/model-driven-validation-example/model-driven-validation-example.component.ts
@@ -36,4 +36,7 @@ export class ModelDrivenValidationExampleComponent {
     this.savedValue = form.value.myInput;
   }
 
+  markAllAsTouched() {
+    this.myForm.markAllAsTouched();
+  }
 }