首页 文章

如何使用 Angular 2/2 /4 中的外部按钮在 md-form 内一次清除所有 md-input 字段

提问于
浏览
0

我想使用外部清除按钮一次清除 md-form 中的所有字段,就像在普通 HTML 表单中一样。 md-form 的问题在于它包含 md-input 字段而不是常规输入字段。所以简单的复位功能不会触发。

我已经将每个字段的类型设置为“搜索”,它提供了某种控制,但就像你必须手动点击并删除字段的每个值一样。我想立刻将它们全部删除。

有没有正确的方法来做到这一点?提前致谢。

表格代码

<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:我也用打字稿尝试了类似的东西。但它不起作用

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

  }

1 回答

  • 0

    只需在另一个方法中调用 clearFields()方法就可以了。

    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();
      }
    

相关问题