Angular Material: Reseting reactiveform shows validation error

Question

I am using angular5 reactivemodule to show a form in my application. I had also used required validator which will subsequently make the field in red color and show an error

Answer 1

All you need to do is avoid (ngSubmit) method on your reactive form:
1. Remove (ngSubmit)="submitForm()" from your form tag
1. Change your form button type from 'submit' to 'button'
2. On this button you want to set a click action to (click)="submitForm()"
3. in the submitForm() method do:

this.checkForm.markAsPristine();
this.checkForm.markAsUntouched();

This will submit the form and reset its value without alerting validators