I'm currently working on creating a simple login form with two input fields and a "clear" button that should clear the input field when clicked. How can I achieve this?
I understand how to reset the form in reactive forms using reset(), but I am unsure of how to do it in a template-driven form.
<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 at least 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>
My expectation is that the text field will reset to blank, but nothing happens when I try.