Explicitly validate Template Driven forms in Angular

Question

I have a template driven form which fills controls if data is available. But after the controls are filled, the error styles are not applied while validation(using Angular material elements). Error styles are applied only if I touch element or submit form. How can I trigger form validation manually ?
You can check stackblitz: https://stackblitz.com/github/vugar005/Angular-NT-Components/tree/template-driven-approach
Thanks in advance

Please post an example. Most Angular form template examples only show the validation messages if the control has been touched or changed; your solution may be as simple as removing these conditions from the validation error message element but we will need an example. — Timshel
– Timshel, Commented Aug 9, 2018 at 6:25
added. please check .stackblitz.com/github/vugar005/Angular-NT-Components/tree/… — Vugar Abdullayev
– Vugar Abdullayev, Commented Aug 9, 2018 at 6:47

codeninja.sj · Accepted Answer · 2018-08-09 08:48:02Z

2

Trigger markAsTouched() method explicitly, if there is an error on input control during page load

getErrors(str) {
if (this.ntForm && this.ntForm.controls[str] ) {
  const control = this.ntForm.controls[str];
  const errors = control.errors; 
  if (!errors) { return; }      
  control.markAsTouched();
  // remaining code
}

answered Aug 9, 2018 at 8:48

codeninja.sj

4,1891 gold badge23 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vugar Abdullayev Over a year ago

Thanks. It worked ! I actually placed markAsTouched() after patching value of controls.

jackofallcode · Accepted Answer · 2020-10-11 06:22:15Z

2

Depending on exact requirements, you may want to just trigger validation on all form controls, there is a markAllAsTouched() method on the NgForm object that can do this:

forceValidation(form: NgForm) {
    if (!form.valid) {
        form.control.markAllAsTouched();
    }
}

answered Oct 11, 2020 at 6:22

jackofallcode

2,0061 gold badge14 silver badges16 bronze badges

Collectives™ on Stack Overflow

Explicitly validate Template Driven forms in Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related