通过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>

当我保存表格时，按下保存按钮，有时我想按下重置按钮。不总是！但是当我不得不这样做时，我只想清理时间输入。可能无法清除之前选定的日期。

Answer 1

您可以在OnlyResetTheTimeInputs（）中清除时间的输入字段，如

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

Answer 2

  

看看代码和演示

Source, Stack Blitz

  

说明：

1. 只需简单地清除价值，角度就可以处理视图。

2. 具有双向数据绑定的优点是视图不需要手动更新

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