How to clear form after submit in Angular 2

Question

I have some simple angular 2 component with template  How to clear form and all fields after submit   I can t reload page  After set data with date setValue     field is stil touched    import  Component  from  angular2 core   import  FORM DIRECTIVES  FormBuilder  ControlGroup  Validators  Control  from  angular2 common     Component       selector   loading-form       templateUrl   app loadings loading-form component html       directives   FORM DIRECTIVES      export class LoadingFormComponent       private form ControlGroup      private date Control      private capacity Control       constructor private  loadingsService LoadingsService  fb FormBuilder            this date   new Control     Validators required           this capacity   new Control     Validators required           this form   fb group                date   this date               capacity   this capacity                        onSubmit value any  void             send some data to backend           loading-form component html   lt div class  card card-block  gt       lt h3 class  card-title  gt Loading form lt  h3 gt        lt form  ngSubmit   onSubmit form value    ngFormModel   form  gt           lt fieldset class  form-group   class has-danger    date valid  amp  amp  date touched  gt               lt label class  form-control-label  for  dateInput  gt Date lt  label gt               lt input type  text  class  form-control form-control-danger form-control-success  id  dateInput                     min  0  placeholder  Enter loading date                      ngFormControl   form controls  date    gt           lt  fieldset gt           lt fieldset class  form-group   class has-danger    capacity valid  amp  amp  capacity touched  gt               lt label class  form-control-label  for  capacityInput  gt Capacity lt  label gt               lt input type  number  class  form-control form-control-danger form-control-success  id  capacityInput                     placeholder  Enter capacity                      ngFormControl   form controls  capacity    gt           lt  fieldset gt           lt button type  submit  class  btn btn-primary   disabled    form valid  gt Submit          lt  button gt       lt  form gt   lt  div gt

User · Answer

resetForm        ObjectName

User · Answer

Make a Call clearForm    in your  ts file   Try like below example code snippet to clear your form data    clearForm      this addContactForm reset          first name              last name              mobile              address              city              state              country               zip

User · Answer

See also https   angular io docs ts latest guide reactive-forms html  section  reset the form flags        RC 6  In RC 6 it should be supported to update the form model  Creating a new form group and assigning to myForm   formGroup   myForm    will also be supported  https   github com angular angular pull 11051 issuecomment-243483654     RC 5  form reset      In the new forms module     RC 5  NgForm has a reset   method and also supports a forms reset event  https   github com angular angular blob 6fd5bc075d70879c487c0188f6cd5b148e72a4dd modules  40angular forms src directives ng form ts L179   lt  RC 3  This will work     onSubmit value any  void       send some data to backend   for var name in form controls          lt Control gt form controls name   updateValue              lt FormControl gt form controls name   updateValue        this should work in RC4 if  Control  is not working  working same in my case     form controls name  setErrors null           See also    https   github com angular angular issues 6196 https   github com angular angular issues 6169 https   github com angular angular issues 4933 https   github com angular angular issues 4914 https   github com angular angular issues 6371

User · Answer

Hm  now  23 Jan 2017 with angular 2 4 3  I made it work like this   newHero         return this model   new Hero 42   APPLIED VALUE           lt button type  button  class  btn btn-default   click   heroForm resetForm newHero     gt New Hero lt  button gt

User · Answer

As of Angular2 RC5  myFormGroup reset   seems to do the trick

User · Answer

Here s how I do it Angular 8   Get a local reference of your form    lt form name  myForm   myForm  ngForm  gt  lt  form gt     ViewChild  myForm    static  false   myForm  NgForm    And whenever you need to reset the form  call resetForm method   this myForm resetForm        You will need FormsModule from  angular forms for it to work  Be sure to add it to your module imports

User · Answer

this myForm reset     This is all enough   You can get the desired output

User · Answer

Here is how I do it in Angular 7 3     you can put this method in a module and reuse it as needed resetForm form  FormGroup         form reset         Object keys form controls  forEach key   gt          form get key  setErrors null                There was no need to call form clearValidators

User · Answer

import  Component  from   angular core   import  NgForm  from   angular forms    Component       selector   example-app       template    lt form  f  ngForm   ngSubmit   onSubmit f   novalidate gt           lt input name  first  ngModel required  first  ngModel  gt           lt input name  last  ngModel gt           lt button gt Submit lt  button gt       lt  form gt       lt p gt First name value     first value    lt  p gt       lt p gt First name valid     first valid    lt  p gt       lt p gt Form value     f value   json    lt  p gt       lt p gt Form valid     f valid    lt  p gt       export class SimpleFormComp       onSubmit f  NgForm                some stuff          f resetForm

User · Answer

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    lt form class  form  id  subscribe-form  data-response-message-animation  slide-in-left   subscribeForm  ngForm   ngSubmit   subscribe subscribeForm value   subscribeForm reset    gt   lt div class  input-group  gt      lt input type  email  name  email  id  sub email  class  form-control rounded-circle-left        placeholder  Enter your email  required ngModel  email  ngModel  email gt      lt div class  input-group-append  gt         lt button class  btn btn-rounded btn-dark  type  submit  id  register            disabled    subscribeForm valid  gt Register lt  button gt      lt  div gt   lt  div gt   lt  form gt    Refer official doc  https   angular io guide forms show-and-hide-validation-error-messages

User · Answer

I found another solution  It s a bit hacky but its widely available in angular2 world    Since  ngIf directive removes the form and recreates it  one can simply add an  ngIf to the form and bind it to some sort of formSuccessfullySentvariable     This will recreate the form and therefore reset the input control statuses    Of course  you have to clear the model variables also  I found it convenient to have a specific model class for my form fields  This way i can reset all fields as simple as creating a new instance of this model class

User · Answer

To reset your form after submitting  you can just simply invoke this form reset    By calling reset   it will    Mark the control and child controls as pristine  Mark the control and child controls as untouched  Set the value of control and child controls to custom value or null  Update value validity errors of affected parties    Please find this pull request for a detailed answer  FYI  this PR has already been merged to 2 0 0   Hopefully this can be helpful and let me know if you have any other questions in regards to Angular2 Forms

User · Answer

Below code works for me in Angular 4  import   FormBuilder  FormGroup  Validators   from   angular forms   export class RegisterComponent implements OnInit    registerForm  FormGroup     constructor private formBuilder  FormBuilder           ngOnInit         this registerForm   this formBuilder group         empname              empemail                    onRegister          sending data to server using http request     this registerForm reset

User · Answer

There is a new discussion about this  https   github com angular angular issues 4933   So far there is only some hacks that allows to clear the form  like recreating the whole form after submitting  https   embed plnkr co kMPjjJ1TWuYGVNlnQXrU

User · Answer

To angular version 4  you can use this   this heroForm reset      But  you could need a initial value like   ngOnChanges      this heroForm reset     name  this hero name    Or    to empty initial value     address  this hero addresses 0     new Address            It is important to resolve null problem in your object reference    reference link  Search for  reset the form flags

[angular] How to clear form after submit in Angular 2?

Examples related to angular

Examples related to angular2-forms