angular 8 中模板驱动表单中的 "clear" 按钮单击时如何清除文本字段?
How to clear the text field when clicked on "clear" button in template-driven form in angular 8?
我正在尝试制作一个基本的登录表单,其中包含两个输入字段和一个 "clear" 按钮,该按钮应该将 click.How 上的输入字段设为空白才能做到这一点?
我知道如何使用 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>
我希望文本字段应该重置为空白,但没有任何反应。
您可以像这样使用表单模板参考
<form (ngSubmit)="onSubmit(login)" #login="ngForm">
并且在 .ts 文件中你可以像
一样使用它
onSubmit(login: ngForm) {
login.resetForm();
}
您可以使用 ngForm 属性。
示例:
<form #testForm="ngForm">
</form>
<button (click)="testForm.reset()">Clear</button>
编辑:应该是 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>
对于像这样的简单案例,你甚至可以使用 type=reset
<form>
<input type="text"><br>
<input type="password"><br>
<button type="reset">Clear</button><br>
<button type="submit">Login</button>
</form>
我正在尝试制作一个基本的登录表单,其中包含两个输入字段和一个 "clear" 按钮,该按钮应该将 click.How 上的输入字段设为空白才能做到这一点?
我知道如何使用 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>
我希望文本字段应该重置为空白,但没有任何反应。
您可以像这样使用表单模板参考
<form (ngSubmit)="onSubmit(login)" #login="ngForm">
并且在 .ts 文件中你可以像
一样使用它onSubmit(login: ngForm) {
login.resetForm();
}
您可以使用 ngForm 属性。
示例:
<form #testForm="ngForm">
</form>
<button (click)="testForm.reset()">Clear</button>
编辑:应该是 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>
对于像这样的简单案例,你甚至可以使用 type=reset
<form>
<input type="text"><br>
<input type="password"><br>
<button type="reset">Clear</button><br>
<button type="submit">Login</button>
</form>