I’m working on a form in Angular, and I need to determine if every invalid field has also been touched. This is to provide visual feedback to the user. I currently have a function that checks for invalid controls when the user changes a value, but I’m struggling to handle the case where a user simply touches the controls without changing their values.

getAllErrorsTouched(): boolean {
    return Object.keys(this.formUser.controls).every((key) => {
        const control = this.formUser.get(key);
        return control?.invalid ? control.touched : true;
    });
}

The issue is when I use this.formUser.statusChanges.subscribe(() => console.log(this.getAllErrorsTouched())). This only triggers when the user changes a value. If a user touches the fields without entering anything, the function doesn’t trigger, even though the invalid fields have been touched

Is there a way to ensure that getAllErrorsTouched() is called whenever a user touches a field, regardless of whether they change its value? Any suggestions or best practices for implementing this functionality in Angular forms would be greatly appreciated!