通过单击Angular 5中的按钮来清除/重置特定的输入字段

Question

<form #addOpeninghoursForm="ngForm" ngNativeValidate (ngSubmit)="addOpeninghours()">

<div class="form-group">
  <label for="day">Select Day:</label>
  <select class="form-control" [(ngModel)]="openinghours.day" name="day" id="day" required>
    <option value="1">Saturday</option>
    <option value="2">Sunday</option>
  </select>
</div>

<div class="form-group">
  <label for="opens_from">Opens From:</label>
  <input type="time" class="form-control" [(ngModel)]="openinghours.opens_from" name="opens_from" id="opens_from" placeholder="Enter the time" required>
</div>

<div class="form-group">
  <label for="opens_till">Opens Till:</label>
  <input type="time" class="form-control" [(ngModel)]="openinghours.opens_till" name="opens_till" id="opens_till" placeholder="Enter the time" required>
</div>

<button type="submit" class="btn btn-success">Save</button>
<button type="submit" class="btn btn-success" (click)="onlyResetTheTimeInputs?!?!">Reset</button>
</form>

When I saved the form, by pressing the save button, sometimes I want to press the reset button. Not always! But when I have to, I only wanna clear the time inputs. The earlier selected day may not be cleared.

Answer 1

You can clear the input fields of time in onlyResetTheTimeInputs() like

onlyResetTheTimeInputs(): void {
  this.openinghours.opens_from  =  this.openinghours.opens_till = '';
}

Answer 2

Take a look at the code and demo

Source, Stack Blitz

Explanation:

1. Just a simple clearing of value will do, angular takes care of the view.

2. Advantage of having two way data binding is view doesn't need to be updated manually

    onlyResetTheTimeInputs() { this.openinghours.opens_from = this.openinghours.opens_till = null; }