The cleanest way for forms to reset

Question

What is the cleanest way to reset forms in the latest version of Angular 2? I would like to reset the input text fields after adding the message.

@Component({ selector: 'post-div', template: ' <h2>Posts</h2> <form (submit)="addPost()"> <label>Title: </label><input type="text" name="title" [(ngModel)]="title"><br/> <label>Body: </label><input type="text" name="body" [(ngModel)]="body"><br/> <input type="submit" value="Add Post"> </form> <ul> <li *ngFor="let post of posts"> <strong>{{post.title}}</strong> <p>{{post.body}}</p> </li> </ul> ', providers: [PostService] }); addPost(){ this.newPost = { title: this.title, body: this.body } this._postService.addPost(this.newPost); } 

Answer 1

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

Or pass the function form:

 <form #myForm="ngForm" (submit)="addPost(myForm)"> ... </form> 

 addPost(form: NgForm){ this.newPost = { title: this.title, body: this.body } this._postService.addPost(this.newPost); form.reset(); // or form.resetForm(); } 

We add one more example for people who cannot make the above work.

At the push of a button:

 <form #heroForm="ngForm"> ... <button type="button" class="btn btn-default" (click)="newHero(); heroForm.reset()">New Hero</button> </form> 

The same applies above, you can also pass the form to the newHero function.

Answer 2

The easiest and most understandable way to clean forms, as well as their error states (dirty, untouched, etc.)

 this.formName.reset(); 

Read more about forms here.

• https://angular.io/docs/ts/latest/guide/forms.html

PS: Since you asked a question, your question code does not use a form, you use a simple two-day data binding using ngModel, and not with formControl .

The form.reset() method works only to call the reset of formControls

Answer 3

The easiest way to clean form

 <form #myForm="ngForm" (submit)="addPost();"> ... </form> 

Then in the .ts file you need to access the local template variable, i.e.

 @ViewChild('myForm') mytemplateForm : ngForm; //import { NgForm } from '@angular/forms'; 

to reset values ​​and status (untouched, touched ..) do the following

 addPost(){ this.newPost = { title: this.mytemplateForm.value.title, body: this.mytemplateForm.value.body } this._postService.addPost(this.newPost); this.mytemplateForm.reset(); } 

This is the cleanest way to clean molds.

Answer 4

We do this with simple HTML and javascript by casting the HTML element to avoid typing errors

<form id="Login">

and in component.ts file,

 clearForm(){ (<HTMLFormElement>document.getElementById("Login")).reset(); } 

The clearForm() method can be called anywhere.

Answer 5

You can also do this via JavaScript:

 (document.querySelector("form_selector") as HTMLFormElement).reset(); 

Answer 6

component.html (What you called your form)

 <form [formGroup]="contactForm"> 

(add click event (click) = "clearForm ())

 <button (click)="onSubmit()" (click)="clearForm()" type="submit" class="btn waves-light" mdbWavesEffect>Send<i class="fa fa-paper-plane-o ml-1"></i></button> 

component.ts

  clearForm() { this.contactForm.reset(); } 

view the entire code: https://ewebdesigns.com.au/angular-6-contact-form/ How to add a contact form using firebase

Answer 7

To reset a form, call the reset function with the form name in the same structure as in the group

 addPost(){ this.newPost = { title: this.title, body: this.body } this.formName.reset({ "title": '', "body": '' }); } 

Answer 8

The easiest way to clear a form using a button in angular2 + is to

give your form a name using #

 <form #your_form_name (ngSubmit)="submitData()"> </form> <button (click)="clearForm(Your_form_name)"> clear form </button> 

in your component.ts file

 clearForm(form: any) { form.reset(); } 

Answer 9

 this.<your_form>.form.markAsPristine(); this.<your_form>.form.markAsUntouched(); this.<your_form>.form.updateValueAndValidity(); 

may also help

Answer 10

  //Declare the jquery param on top after import declare var $: any; declare var jQuery: any; clearForm() { $('#contactForm')[0].reset(); } 

Answer 11

Just use the reset() method to reset the form. This resets the form, but you may get a problem such as validation errors - for example: Name is required

To solve this problem, use the resetForm() method. It resets the form, and also resets the sending status, solving your problem.

The resetForm() method actually calls the reset () method and additionally resets the send status.