Angular form reset after submit

Question

I have Angular form (not reactive):

<form #form="ngForm" (submit)="submit(); form.reset()">
 <input ... />
</form>

But form does not reseting after submit, and inputs still marked as touched.

Please, explain, how can i reset form in Angular 5?

StackBlitz: https://stackblitz.com/edit/reset-form-demo-jdsdwe2

What i want: Clear focus and mark as untouched after submit.

Can you show this behavior on stackblitz? I ask it because it works for me — yurzui
The field is cleared if I remove [ngModelOptions]="{standalone: true}" and give a name to the input element. See this stackblitz. — ConnorsFan

miladfm miladfm · Accepted Answer · 2018-05-12T20:16:14

Using @angular/forms when you use a <form> tag it automatically creates a FormGroup.

For every contained ngModel tagged it will create a FormControl and add it into the FormGroup created above; this FormControl will be named into the FormGroup using attribute name.

Example:

<form #f="ngForm">
    <input type="text" [(ngModel)]="firstFieldVariable" name="firstField">
    <span>{{ f.controls['firstField']?.value }}</span>
</form>

When you mark it as standalone: true this will not happen (it will not be added to the FormGroup).

Angular form reset after submit

1 Answers