Individual form control validation trigger.

[vzdendyak]

Hi!
Can someone please tell me whether triggering an individual form control input validation is possible?
As it's mentioned in the Forms documentation, we can use ClrForm.markAsTouched() to trigger the validation, but in my case I want to validate & highlight errors only on several form controls.
I tried to call updateValueAndValidity and markAsTouched/markAllAsTouched, but it didn't help. The form control state is Invalid, the control is touched, but it's still not highlighted with the red color on the UI.

Thanks in advance!

[LynxDelli]

Open the Stackblitz sample, or check the TypeScript tab.

[vzdendyak]

according to the documentation, it's only possible to mark a full form as touched via ClrForm.markAsTouched().
But is it possible to mark as touched an individual form group control?

[kevinbuhmann]

Clarity uses the underlying NgControl for touched and validation state. The ClrForm#markAsTouched is just a way to mark all controls in the form as touched. (Side note: I'm not entirely sure why this method exists because you can do the same thing using the FormGroup#markAllAsTouched method (NgForm#form will give you the FormGroup for a template form). Maybe FormGroup#markAllAsTouched didn't exist when ClrForm#markAsTouched was added. I am not sure.)

Anyway, in Angular, you can mark a single form as touched by calling its markAsTouched method. Then, in order to update the validity state to show the validation messages, you need to call updateValueAndValidity. Again, this is not a Clarity-specific thing. This is a general Angular forms thing.

Example: https://stackblitz.com/edit/spmhzl?file=src%2Fapp%2Fexample.component.ts,src%2Fapp%2Fexample.component.html