How to clear all the md-input fields at once inside a md-form using an external button in Angular 2/2+/4

问题

I want to clear all the fields inside a md-form at once using an external clear button like you do in normal HTML Forms. The problem with md-form is that it contains md-input fields instead of regular input fields. So the simple reset function won't trigger that.

I've set the type of each field to 'search' that gives some kind of control but it's like u have to manually click and remove each value of the filed. I want to erase them all at once.

Is there a proper way to to this? Thanks in advance.

Form Code

<form class="formwidth" (ngSubmit)="searchClass()" #myForm="ngForm">
      <table class="fullwidth" cellspacing="0">
        <tr>
          <td>
          </td>
          <td>
            <md-input-container div="addClassName" *ngIf="classClicked === true">
            <input [(ngModel)]="message.className" mdInput placeholder="Class Name" id="className" name="classname" type="search" >
          </md-input-container>
            <md-input-container div="addJarName" *ngIf="jarFileClicked === true">
              <input [(ngModel)]="message.jarName" mdInput placeholder="Jar File Name" id="jarName" name="jarname" type="search" >
            </md-input-container>
            <md-input-container div="addVersion" *ngIf="versionClicked === true">
              <input [(ngModel)]="message.version" mdInput placeholder="Version" id="versionNumber" name="versionnumber" type="search" >
            </md-input-container>
            <md-input-container div="addDirectory" *ngIf="directoryClicked === true">
              <input [(ngModel)]="message.directory" mdInput placeholder="Directory" id="directoryName" name="directoryname" type="search" >
            </md-input-container>
            <md-input-container div="addDependentClass" *ngIf="dependentClicked === true">
              <input [(ngModel)]="message.dependentClass" mdInput placeholder="Dependent Class Name" id="dependentClassName" name="dependentclassname" type="search" >
            </md-input-container>
          </td>
      </table>
      <br>
      <p *ngIf="classClicked === true || jarFileClicked === true || versionClicked === true || directoryClicked === true || dependentClicked === true">
        <button md-raised-button color="accent" type="submit" id="submitButton">Submit</button>
        <button md-raised-button id="clearButton" (click)="setAllToFalse() && clearFields()">Clear</button>
      </p>
    </form>

P.S : I tried something like this with typescript as well. But it don't work

clearFields(){
    this.message.jarName="";
    this.message.className="";
    this.message.version="";
    this.message.directory="";
    this.message.dependentClass="";

  }

回答1:

Simply calling the clearFields() method inside another method worked.

setAllToFalse(){
    this.classClicked = false;
    this.jarFileClicked = false;
    this.versionClicked = false;
    this.directoryClicked = false;
    this.dependentClicked = false;
    this.condition_1 = false;
    this.condition_2 = false;
    this.condition_3 = false;
    this.condition_4 = false;
    this.condition_5 = false;
    this.condition_6 = false;
    this.condition_7 = false;
    this.clearFields();
  }

来源：https://stackoverflow.com/questions/46168337/how-to-clear-all-the-md-input-fields-at-once-inside-a-md-form-using-an-external

标签

material-design

angular2-forms

clear