CODEWITHSUNDEEP
angulartypescriptangular-material
A. Mehlen
A. Mehlen

Reputation: 135

Angular Material button to clear entire form

Is it possible to clear/reset a form with a single button? The form contains material datepicker, input, textarea, select and checkboxes.

My actual code:

  <form class="example-form" #form="ngForm">
    <button mat-raised-button color="primary (click)="clear(form.value)">Clear</button>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="Name" name="name" ngModel>
    </mat-form-field>
    <mat-form-field>
      <input matInput [matDatepicker]="birthday" [(ngModel)]="geburtsdatum" placeholder="Geburtsdatum" name="geburtsdatum">
      <mat-datepicker-toggle matSuffix [for]="birthday"></mat-datepicker-toggle>
      <mat-datepicker #birthday></mat-datepicker>
    </mat-form-field>
    <mat-checkbox [(ngModel)]="unlimited" name="unbegrenzt">unlimited</mat-checkbox>
    <mat-form-field>
      <mat-select placeholder="Transpondertyp" name="transponderTyp" [(ngModel)]="form.transponderTyp">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let transponderTyp of transponderTyps" [value]="transponderTyp.value">
          {{ transponderTyp.viewValue }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </form>

Thanks in advance :-)

Best regards

Upvotes: 4

Views: 21531

Answers (4)

Jeremy
Jeremy

Reputation: 41

Suhag's solution should work, although I would always specify the button type so it is not treated as a submit button:

<button type="button"(click)="form.reset()">Reset</button>

Otherwise you could simply do this:

<button type="reset">Reset</button>

Upvotes: 2

Colo Ghidini
Colo Ghidini

Reputation: 723

Accessing to ngForm directive into the component you would be able to use:

ngForm.resetForm()

Checkout this example:

http://plnkr.co/edit/Fbb9QQQBI2sWF6mdrcNU?p=preview

Upvotes: 0

Suhag Lapani
Suhag Lapani

Reputation: 695

<button (click)="form.reset()" >RESET</button>

use reset() method of TD form

Upvotes: 4

Luciano Huguenin
Luciano Huguenin

Reputation: 221

You have to clear the model on the click event:

 <form class="example-form" #form="ngForm">
    <button mat-raised-button color="primary (click)="clear(form.value)">Clear</button>
    <mat-form-field class="example-full-width">
      <input matInput placeholder="Name" name="name" ngModel>
    </mat-form-field>
    <mat-form-field>
      <input matInput [matDatepicker]="birthday" [(ngModel)]="geburtsdatum" placeholder="Geburtsdatum" name="geburtsdatum">
      <mat-datepicker-toggle matSuffix [for]="birthday"></mat-datepicker-toggle>
      <mat-datepicker #birthday></mat-datepicker>
    </mat-form-field>
    <mat-checkbox [(ngModel)]="unlimited" name="unbegrenzt">unlimited</mat-checkbox>
    <mat-form-field>
      <mat-select placeholder="Transpondertyp" name="transponderTyp" [(ngModel)]="form.transponderTyp">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let transponderTyp of transponderTyps" [value]="transponderTyp.value">
          {{ transponderTyp.viewValue }}
        </mat-option>
      </mat-select>
    </mat-form-field>
   <button (click)="resetForm()" >RESET</button>
  </form>

component:

resetForm() {
  this.geburtsdatum = '';
  this.unlimited = '';
  this.form.transponderTyp = '';
  this.transponderTyp.value = '';
}

Upvotes: 1

Related Questions