如何使用 Angular 2/2+/4 中的外部按钮一次清除 md 表单内的所有 md 输入字段 [英] How to clear all the md-input fields at once inside a md-form using an external button in Angular 2/2+/4
问题描述
我想像在普通 HTML 表单中一样使用外部清除按钮一次清除 md 表单中的所有字段.md-form 的问题在于它包含 md-input 字段而不是常规输入字段.所以简单的重置功能不会触发它.
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 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 :我也用打字稿尝试过这样的事情.但它不起作用
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="";
}
推荐答案
只需在另一个方法中调用 clearFields() 方法即可.
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();
}
这篇关于如何使用 Angular 2/2+/4 中的外部按钮一次清除 md 表单内的所有 md 输入字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!