在角度 8 中单击模板驱动表单中的“清除”按钮时如何清除文本字段？答案

【问题标题】：How to clear the text field when clicked on "clear" button in template-driven form in angular 8?在角度 8 中单击模板驱动表单中的“清除”按钮时如何清除文本字段？
【发布时间】：2019-06-10 12:32:04
【问题描述】：

我正在尝试制作一个带有两个输入字段和一个“清除”按钮的基本登录表单，该按钮应在单击时将输入字段空白。如何做到这一点？

我知道如何使用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>

我希望文本字段应重置为空白，但没有任何反应。

【问题讨论】：

标签： javascript angular typescript angular7 angular8

【解决方案1】：

对于这种简单的情况，你甚至可以使用type=reset

<form>
    <input type="text"><br>
    <input type="password"><br>
    <button type="reset">Clear</button><br>
    <button type="submit">Login</button>
</form>

【讨论】：

我错了。它已重置。这是解决方案的明确方法
@EmreHIZLI AFAIK 只有在使用自定义表单元素时才会出现问题

【解决方案2】：

你可以使用 ngForm 属性。

click to guide

示例：

<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>

【讨论】：

嘿，谢谢。但它只会清除用户名字段。你能帮我清除用户名字段中的密码吗？
@JP2_7 将此属性添加到您的密码输入 -> ngModel name="password" #password="ngModel"
哇，它奏效了。谢谢。你是如何学习角度的？初学者有什么建议吗？
我很乐意为您提供帮助。自 angularjs 和 angular 2 以来，我一直在研究 angular。我建议你关注这个 youtube 频道。 youtube.com/channel/UCm9iiIfgmVODUJxINecHQkA 和这个youtube.com/channel/UCSJbGtTlrDami-tDGPUV9-w @JP2_7

【解决方案3】：

您可以使用表单模板参考，如

<form (ngSubmit)="onSubmit(login)" #login="ngForm">

在 .ts 文件中，您可以像使用它一样使用它

onSubmit(login: ngForm) {
  login.resetForm();
}

【讨论】：