title: How to clear the text field when clicked on "clear" button in template-driven form in angular 8?
body: <p>i am trying to make a basic login form with two input fields and a "clear" button which should blank the input field on click.How to do that ?</p>
  
  <p>i know how to do it in reactive forms using reset() but i don't know how to do in template-driven form. </p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;form&gt;
    &lt;label&gt;Username:&lt;/label&gt;
    &lt;input   name="username" ngModel #name="ngModel" required minlength="4" maxlength="10" appForbiddenName="jedii" type="text"&gt;
     &lt;div *ngIf="name.touched &amp;&amp; !name.valid"&gt;
       &lt;div *ngIf="name.errors.required"&gt;username is mandatory&lt;/div&gt;
       &lt;div *ngIf="name.errors.minlength"&gt;username must be of min 4 characters&lt;/div&gt;
       &lt;div *ngIf="name.errors.forbiddenName"&gt;username cannot be jedii&lt;/div&gt;
     &lt;/div&gt; 
    &lt;br&gt;&lt;br&gt;
    &lt;label&gt;Password:&lt;/label&gt;
    &lt;input type="password" required&gt;
  &lt;/form&gt;
  &lt;br&gt;
  &lt;button&gt;Login&lt;/button&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;button&gt;Clear&lt;/button&gt; 
  </code></pre>
  
  <p>i expect that text field should be reset to blank but nothing happens.</p>