Reset Form in angular 5 after submit

Question

 <form class="form-horizontal" name="form" (ngSubmit)="!f.form.invalid && staffDetails(model)" #f="ngForm" novalidate>


 <div class="form-group"><button [disabled]="f.invalid" *ngIf ="buttonSave" class="btn btn-info">Save</button></div>

after click submit button without refreshing the page when resubmit the values didn't fetch

Answer 1

A reset will clear the entire form and move its state back to pristine (no validations fired), whereas a resetForm will just clear the values and not change the state. Source

depending on what needs to be done

html file

<form #f="ngForm" (ngSubmit)="onSubmit(f)">

ts file

protected onSubmit(f: NgForm): void {

        // code here

        f.resetForm(); or f.reset();
    }

pass the form instance defined as f to the submit function and do the reset Source

Answer 2

HTML component

Add #f="ngForm" in the form tag as you'have already added

 <form class="form-horizontal" name="form" (ngSubmit)="!f.form.invalid
    && staffDetails(model)" #f="ngForm" novalidate>
   <!-- form inputs -->
 </form> <!-- form closed>

Logic Component i.e TS File

import { ViewChild } from '@angular/core';

  @ViewChild('f') myForm; //feth reference of form using ViewChild property

After declare, we can reset the form using reset function

staffDetails(data){

     this.myForm.resetForm(); //now the form is reset
}

Working Module for this functionality:- https://angular-xtzntk.stackblitz.io/

Answer 3

Use reset()

Try this

this.myform.reset();

Answer 4

As you are using template driven forms try this.

Use (ngSubmit) event to handle the form submit event. And pass the form as a parameter to the event handler. (ngSubmit)="onFormSubmit(f)

In your component.html

 <form class="form-horizontal" name="form" (ngSubmit)="onFormSubmit(f)" #f="ngForm" novalidate>

In your component.ts

public onFormSubmit(ngForm: ngForm): void {
   // !f.form.invalid && staffDetails(model)
   ngForm.form.reset();
}

Answer 5

can you try this

this.myform.reset();

Also, refer the document.

Answer 6

use for to reset the form

f.reset()

Please refer to the link for more details.

Answer 7

To reset the complete form upon submission, you can use reset() in Angular. The below example is implemented in Angular 8. Below is a Subscribe form where we are taking email as an input.

<form class="form" id="subscribe-form" data-response-message-animation="slide-in-left" #subscribeForm="ngForm"
(ngSubmit)="subscribe(subscribeForm.value); subscribeForm.reset()">
<div class="input-group">
   <input type="email" name="email" id="sub_email" class="form-control rounded-circle-left"
      placeholder="Enter your email" required ngModel #email="ngModel" email>
   <div class="input-group-append">
      <button class="btn btn-rounded btn-dark" type="submit" id="register"
         [disabled]="!subscribeForm.valid">Register</button>
   </div>
</div>
</form>

official doc: https://angular.io/guide/forms#show-and-hide-validation-error-messages

Answer 8

Angular: 8.2.11
In Template: HTML

<form #f="ngForm" [formGroup]="postForm" (keydown.enter)="$event.preventDefault()" (ngSubmit)="onSubmit(f)">

In Component: Typescript

async onSubmit(f: NgForm) {
    f.reset();
  }