單擊模板驅動形式的角度為8的“清除”按鈕時，如何清除文本字段？

Question

我正在嘗試制作一個具有兩個輸入字段和一個“清除”按鈕的基本登錄表單，該按鈕應在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> 

我希望該文本字段應重置為空白，但什么也不會發生。

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>

Answer 2

您可以使用表單模板參考，例如

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

在.ts文件中，您可以像

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

Answer 3

您可以使用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>