Cleanest way to reset forms

Question

What is the cleanest way to reset forms in Angular 2 latest version  I would like to reset the input textboxes after adding a post      Component     selector   post-div     template                 lt h2 gt Posts lt  h2 gt               lt form  submit   addPost    gt                   lt label gt Title   lt  label gt  lt input type  text  name  title    ngModel    title  gt  lt br  gt                   lt label gt Body   lt  label gt  lt input type  text  name  body    ngModel    body  gt  lt br  gt                   lt input type  submit  value  Add Post  gt               lt  form gt               lt ul gt                   lt li  ngFor  let post of posts  gt                       lt strong gt   post title   lt  strong gt                       lt p gt   post body   lt  p gt                   lt  li gt               lt  ul gt                 providers   PostService       addPost        this newPost             title  this title          body  this body           this  postService addPost this newPost

User · Answer

The simplest method to clear a form with a button in angular2+ is

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: FormGroup) {
form.reset();
}

User · Answer

this  lt your form gt  form markAsPristine    this  lt your form gt  form markAsUntouched    this  lt your form gt  form updateValueAndValidity      can also help

User · Answer

component html  What you named you form    lt form  formGroup   contactForm  gt     add click event  click   clearForm        lt button  click   onSubmit     click   clearForm    type  submit  class  btn waves-light  mdbWavesEffect gt Send lt i class  fa fa-paper-plane-o ml-1  gt  lt  i gt  lt  button gt    component ts   clearForm                  this contactForm reset                    view all code  https   ewebdesigns com au angular-6-contact-form  How to add a contact form with firebase

User · Answer

Doing this with simple HTML and javascript by casting the HTML element so as to avoid typescript errors    lt form id  Login  gt   and in the component ts file    clearForm       lt HTMLFormElement gt document getElementById  Login    reset        the method clearForm   can be called anywhere as need be

User · Answer

easiest way to clear form   lt form  myForm  ngForm   submit   addPost     gt       lt  form gt    then in  ts file you need to access local variable of template i e   ViewChild  myForm   mytemplateForm   ngForm    import   NgForm   from   angular forms     for resetting values and state pristine 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 most cleanest way to clear the form

User · Answer

Easiest and cleanest way to clear forms as well as their error states  dirty  pristine etc   this formName reset      for more info on forms read out here   https   angular io docs ts latest guide forms html   PS  As you asked a question there is no form used in your question code you are using simple two-day data binding using ngModel  not with formControl   form reset   method works only for formControls reset call

User · Answer

Declare the jquery param on top after import declare var    any  declare var jQuery  any   clearForm             contactForm   0  reset

User · Answer

To reset the form call the reset function with the form name in the same structure as like from group  addPost        this newPost             title  this title          body  this body           this formName reset            title                body

User · Answer

Add a reference to the ngForm directive in your html code and this gives you access to the form    lt form  myForm  quot ngForm quot   ngSubmit   quot addPost    myForm reset   quot  gt       lt  form gt   Or pass the form to the function   lt form  myForm  quot ngForm quot   ngSubmit   quot addPost myForm  quot  gt       lt  form gt    addPost form  NgForm       this newPost             title  this title          body  this body           this  postService addPost this newPost       form resetForm       or form reset       The difference between resetForm and reset is that the former will clear the form fields as well as any validation  while the later will only clear the fields  Use resetForm after the form is validated and submitted  otherwise use reset   Adding another example for people who can t get the above to work  With button press   lt form  heroForm  quot ngForm quot  gt               lt button type  quot button quot  class  quot btn btn-default quot   click   quot newHero    heroForm reset   quot  gt New Hero lt  button gt   lt  form gt   Same thing applies above  you can also choose to pass the form to the newHero function

User · Answer

For just to reset the form use reset   method  It resets the form but you could get issue such as  validation errors - ex  Name is required  To solve this use resetForm   method  It resets the form and also resets the submit status solving your issue   The resetForm   method is actually calling reset   method and additionally it is resetting the submit status

User · Answer

You can also do it through the JavaScript    document querySelector  form selector   as HTMLFormElement  reset

User · Answer

Angular Reactive Forms  onCancel    void     this registrationForm reset      this registrationForm controls  name   setErrors null     this registrationForm controls  email   setErrors null

[angular] Cleanest way to reset forms

Examples related to angular

Examples related to forms