how to reset angular form and set default values after submitting

Question

My expected results is to reset the form after it has been submit and set its default values binded to the formGroup control. I am attempt to reset the form to its default data after submitting by calling reset() on the form submit. Please advise me on how can I reset the default value in the date and time field .

Example :

pickupDate = new Date().toISOString().slice(0,10);
pickupTime = moment().format() ;

onSubmit(orderData: Order){
        this.apiService(orderData).subscribe( order => {
                 orderForm.reset()
})
}

Please help Thanks

You have to set the model properties to empty strings. Clearing the form won't do what you expect. — Randy Casburn
– Randy Casburn, Commented Apr 17, 2018 at 5:07
You can patchValues to the form or re-build the form after resetting. — Anuradha Gunasekara
– Anuradha Gunasekara, Commented Apr 17, 2018 at 5:09
@RandyCasburn resetting the form fields to empty string would not be efficient to add to it my form group has a allot of fields. — d-shall
– d-shall, Commented Apr 17, 2018 at 14:24
@AnuradhaGunasekara can you be more clear on how I can achieve this using patchValue. — d-shall
– d-shall, Commented Apr 17, 2018 at 14:25
my formgroup looks similar to this: this.orderForm = fb.group({ pickupDate: [this.pickupDate, Validators.required], pickupTime: [this.pickupTime, Validators.required] }) — d-shall
– d-shall, Commented Apr 17, 2018 at 14:25

Anuradha Gunasekara · Accepted Answer · 2018-04-17 14:32:49Z

12

After submitting your form. you are calling

this.yourForm.reset()

Then you can patch initial values to the form like this.

this.yourForm.patchValue({
  firstControllerName: this.initialValues.value1,
  secondControllerName: this.initialValues.value2,
  // other controller names goes here
});

Hope this helps.

answered Apr 17, 2018 at 14:32

Anuradha Gunasekara

7,0132 gold badges29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

d-shall Over a year ago

Thanks, I reinitialize the form after calling reset

ak.leimrey · Accepted Answer · 2018-04-17 12:49:36Z

4

I don't know how your formBuilder looks like, but

this.yourForm.reset({}) already does the trick to empty fields that weren't predetermined. You could attempt something similar to this...

  ngOnChanges() {
    this.queryForm.reset({
    });

    // We generate an empty form again. 
    this.createForm();
  }

And your createForm could look like this...

createForm() {

    // As the method name suggests, we create a form. A form consists of Groups, Controls - and optionally - Arrays...
    this.queryForm = new FormGroup({
      query: new FormControl(''),

      formArray: new FormArray([this.initQueryConditions())
    })
  }

answered Apr 17, 2018 at 12:49

ak.leimrey

1,2632 gold badges13 silver badges30 bronze badges

Comments

Leonel Thiesen · Accepted Answer · 2022-01-26 12:41:50Z

3

You can reset and set the default values you want at the same time like this:

    defaultFormValues: any = {
        date: Date.now
    };

    formG: FormGroup = new FormGroup({
        'date': new FormControl(this.defaultFormValues.date)
    });

    onSubmit(orderData: Order) {
        this.apiService(orderData).subscribe(order => {
            this.formG.reset(this.defaultFormValues);
        });
    }

edited Jan 26, 2022 at 12:41

answered Feb 19, 2019 at 19:19

Leonel Thiesen

932 silver badges7 bronze badges

Comments

NitinSingh · Accepted Answer · 2018-04-17 06:13:27Z

0

Approach for clearing depends whether you are using Template driven forms or Reactive forms.

Angular Forms, check full syntax with explaination

If template, then you need to set the model object to a default one (not necessarily empty). If reactive, then call a method which explictly empties each of form's value.

After that, do the form.Reset to move it back to "pristine | unchanged" state, thus removing validators as well

answered Apr 17, 2018 at 6:13

NitinSingh

2,0781 gold badge21 silver badges36 bronze badges

Comments

teranshil · Accepted Answer · 2022-09-01 14:22:11Z

0

What I have found convenient is to segregate the form creation into a separate function. This way you can always reset the whole form just by calling the function.

  public form: FormGroup;
  private createForm(): void {
    this.form = this.builder.group({
      title: [ '', [Validators.required] ],
      description: [ '', [Validators.required, Validators.maxLength(200)] ],
      category: [ '', [Validators.required] ]
    });
  }

  private onSubmit(data) {
    this.apiService(data).subscribe(order => {
      this.createForm();
    });
  }

answered Sep 1, 2022 at 14:22

teranshil

1971 silver badge7 bronze badges

Collectives™ on Stack Overflow

how to reset angular form and set default values after submitting

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related