javascript - 在 Angular 8 模板驱动表单中单击 "clear"按钮时如何清除文本字段？

Question

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

我知道如何使用reset()以 react 形式进行操作，但我不知道如何以模板驱动形式进行操作。

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

我希望文本字段应重置为空白，但什么也没有发生。

Answer 1

对于像这样的简单情况，您甚至可以使用 type=reset

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