我正在尝试制作一个具有两个输入字段和一个“清除”按钮的基本登录表单,该按钮应在单击时空白输入字段。
我知道如何使用reset()以反应形式进行操作,但是我不知道如何以模板驱动形式进行操作。
<form>
<label>Username:</label>
<input name="username" ngModel #name="ngModel" required minlength="4" maxlength="10" appForbiddenName="jedii" type="text">
<div *ngIf="name.touched && !name.valid">
<div *ngIf="name.errors.required">username is mandatory</div>
<div *ngIf="name.errors.minlength">username must be of min 4 characters</div>
<div *ngIf="name.errors.forbiddenName">username cannot be jedii</div>
</div>
<br><br>
<label>Password:</label>
<input type="password" required>
</form>
<br>
<button>Login</button>
<br>
<br>
<button>Clear</button>
我希望将文本字段重置为空白,但什么也不会发生。
答案 0 :(得分:1)
对于像这样的简单情况,您甚至可以使用type=reset
<form>
<input type="text"><br>
<input type="password"><br>
<button type="reset">Clear</button><br>
<button type="submit">Login</button>
</form>
答案 1 :(得分:0)
您可以使用表单模板参考
<form (ngSubmit)="onSubmit(login)" #login="ngForm">
。在.ts文件中,您可以像
一样使用它onSubmit(login: ngForm) {
login.resetForm();
}
答案 2 :(得分:0)
您可以使用ngForm属性。
示例:
<form #testForm="ngForm">
</form>
<button (click)="testForm.reset()">Clear</button>
edit:应为resetForm()。您可以阅读指南。谢谢
编辑:最终解决方案
<form #testForm="ngForm">
<label>Username:</label>
<input name="username"
ngModel
#name="ngModel"
required
minlength="4"
maxlength="10"
type="text">
<br><br>
<label>Password:</label>
<input type="password"
ngModel
name="password"
#password="ngModel"
required>
</form>
<br>
<button>Login</button>
<br>
<br>
<button (click)="testForm.resetForm()">Clear</button>