Angular Reactive forms : how to reset form state and keep values after submit

In an Angular reactive form. How to reset only the state of form after successful submit?

Here is the process:

• Create the form and setValue from service result
• Modify values and submit the form
• If form is properly submitted to service, then reset and keep values

How to keep values as modified and reset the form to its pristine state.

A form.reset() simply empty the form. But if I don't call it, the state is not reset and for example my validations depending on form state classes (pristine, dirty, valid etc.) are still there.

Solution 1:

The solution of @smnbbrv works pretty well.

You can also provide your actual form value to reset() method.

Given the fact myReactiveForm is a Reactive form in your component. After successful submit of your form (by calling a service for example), then your can do:

this.myReactiveForm.reset(this.myReactiveForm.value);

It will reset the form and set the "new" form values to the same value you form had.

This method can be see within Tour of Hero example Official Angular.io doc

Solution 2:

That's pretty much easy:

this.form.markAsPristine();
this.form.markAsUntouched();

This resets the form metadata and the form is pristine again