How to use Angular's ChangeDetectionStrategy.OnPush for performance optimization while maintaining form validation?
I'm updating my dependencies and I'm relatively new to this, so bear with me. I'm working on an Angular 14 application where I need to optimize performance using `ChangeDetectionStrategy.OnPush` but I'm encountering issues with form validation not triggering updates as expected. My component is structured as follows: ```typescript import { Component, ChangeDetectionStrategy } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-my-form', templateUrl: './my-form.component.html', changeDetection: ChangeDetectionStrategy.OnPush }) export class MyFormComponent { myForm: FormGroup; constructor(private fb: FormBuilder) { this.myForm = this.fb.group({ name: ['', Validators.required], email: ['', [Validators.required, Validators.email]] }); } onSubmit() { if (this.myForm.valid) { console.log('Form Submitted!', this.myForm.value); } } } ``` In my template, I have the form set up like this: ```html <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <input formControlName="name" placeholder="Name" /> <div *ngIf="myForm.get('name').invalid && myForm.get('name').touched"> Name is required. </div> <input formControlName="email" placeholder="Email" /> <div *ngIf="myForm.get('email').invalid && myForm.get('email').touched"> Valid email is required. </div> <button type="submit">Submit</button> </form> ``` The issue I'm facing is that when the user types, the validation messages do not appear unless the form's state changes, which does not happen because of the OnPush strategy. I tried using `markForCheck()` from `ChangeDetectorRef`, but it hasn't resolved the issue: ```typescript import { ChangeDetectorRef } from '@angular/core'; constructor(private fb: FormBuilder, private cd: ChangeDetectorRef) { // ... } onSubmit() { this.cd.markForCheck(); // Logic to validate form... } ``` Unfortunately, this doesn't seem to trigger the validation status updates. What is the right approach to ensure that the form validation works smoothly with the OnPush change detection strategy? Any hints or best practices would be greatly appreciated! For context: I'm using Typescript on Ubuntu. Am I missing something obvious? This is for a desktop app running on Debian.