Set Form to Pristine without clearing data

I have a form that displays a list of <input type="text"> elements. They all share a common save button which is disabled until the form becomes dirty. Then, once the user clicks the save button, the data will be submitted to the server. If the server successfully saved the data, I want to reset the form to a pristine state, but I want to keep all of the data in the form so the user can edit the data further if they so choose.

After searching, I have found the NgForm.reset() method. While this does set the form to pristine, it unfortunately also clears out the form. The reset method does seem to have a value parameter, but I can't seem to find out what it does. Nevertheless, I don't want the data cleared out.

I have also tried myForm.pristine = true as well, but this causes a reload of the page for some reason.

Here is a plunkr demonstrating the problem.

Solution 1:

What you're looking for is myForm.form.markAsPristine().

Solution 2:

At the moment I can suggest two possible solutions. First one is really close to what you've suggested, as form's reset method has following signature and accepts form value as a first argument:

//@angular/forms/src/model.d.ts:
reset(value?: any, {onlySelf}?: { onlySelf?: boolean; }): void;

In the submit handler, we will capture a copy of the last state:

const { myForm: { value: formValueSnap } } = this;

And do the reset itself:

this.myForm.reset(formValueSnap, false);

Another option from the times, when there was no possibility to reset form, is to create a helper method, which will mark each control as pristine and will keep the data. It can be called in the same submit helper in place of the resetting.

private _markFormPristine(form: FormGroup | NgForm): void {
    Object.keys(form.controls).forEach(control => {
        form.controls[control].markAsPristine();
    });
}

Link to the updated plunkr.