How can I clear/reset the form after submitting on ionic?

Ionic Framework ionic-v3
1

For example, I created an input field using following code:

     <form [formGroup]="orderForm" (ngSubmit)="submit();">
          <ion-list>
          <ion-item>
            <ion-label >Item Name:</ion-label>
            <ion-input type="text" formControlName="itemname" clearInput></ion-input>
          </ion-item>
        </ion-list>
        <button ion-button type="submit" [disabled]="!orderForm.valid">Submit</button>
        </form>

And the “ts” file like this to handle the validation and show the submitted result on the console:
public orderForm:any;

  constructor(private formBuilder: FormBuilder){
  //constructor(formBuilder){
    this.orderForm = this.formBuilder.group({
      "itemname":["",Validators.required]
      //"address": ["",Validators.required]
    });
  }

  submit() {
    console.log(this.orderForm.value);
  }

But how can I clear the value on the input filed after clicked the submit button? Please help and thanks!!!

2

try

this.orderForm.reset()
20 Likes
3

Thank you, my friend!

4

And me also I meet with this problem about on how to clear input field when you submit data

5

Hi bengtler,
Is it possible to reset just one control of the form ?
thanks in advance.

6

have an way to made my buttons pristine again?

so my ng-disable reset together.

7

guess if you do

this.form1.reset();

will only reset your form1, is that your question or I missundertood?

1 Like
8

Sorry for the late answer…

Well, no. This would reset the formgroup ! But I what I want to know is how to reset just a chosen control in the form !
Tried this.form1.control1.reset but this doesn’t work…

9

worked perfectly, thanks a lot!

1 Like
10

Hi @pciseran,

Try this one.

this.orderForm[“controls”][“itemname”].reset().

this will only clear the field that you want.

11

thank you @bengtler :neutral_face:

12

That’s work

Thanks for lot