fix: mark all as touched on form components

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();
     }
   }
 

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>

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();
+  }
 }