Как очистить текстовое поле при нажатии на кнопку «очистить» в форме на основе шаблона в угловых 8?

Question

Я пытаюсь создать базовую форму входа в систему с двумя полями ввода и кнопкой «Очистить», которая должна очистить поле ввода при нажатии. Как это сделать?

Я знаю, как сделать это в реактивном режиме.формы с использованием 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

вы можете использовать атрибут 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>

Answer 3

Вы можете использовать ссылку на шаблон формы как

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

и в файле .ts вы можете использовать его как

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