Angular 5中通过按钮点击清除/重置指定输入字段

嘿，在Angular 5的模板驱动表单场景下，要实现点击按钮清除/重置指定输入字段，有两种实用的方式，结合你给出的代码片段，我给你一步步拆解：

方法一：直接修改双向绑定的变量 #

因为你用了[(ngModel)]做双向绑定，所以最直观的方式就是直接在组件类里修改绑定的属性值，变化会自动同步到表单控件上。

步骤1：在组件类中添加清除方法 #

假设你的opens_from输入框绑定的是openinghours.opensFrom（根据代码片段补全的合理假设），你可以在组件里写一个专门的清除方法：

// 你的组件类代码
clearTargetFields() {
  // 清空时间输入框的值
  this.openinghours.opensFrom = '';
  // 如果需要重置下拉框，就把day设为空（或者你想要的初始值，比如默认未选中状态）
  this.openinghours.day = '';
}

步骤2：在模板中添加触发按钮 #

在表单里加一个按钮，点击时调用上面的方法：

<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.opensFrom" name="opens_from" id="opens_from" required>
  </div>
  
  <!-- 新增清除按钮 -->
  <button type="button" class="btn btn-secondary" (click)="clearTargetFields()">清除指定字段</button>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

这种方式适合简单场景，代码少且容易理解。

方法二：通过表单控件的reset()方法操作 #

如果你想更规范地处理表单状态（比如清除控件的dirty/touched标记），可以借助模板引用的ngForm对象来操作指定控件。

步骤1：在组件中获取表单引用 #

先导入ViewChild和NgForm，然后获取模板中的表单实例：

import { Component, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  @ViewChild('addOpeninghoursForm') addOpeninghoursForm: NgForm;
  openinghours = { day: '', opensFrom: '' }; // 初始化绑定对象

  // 清除指定字段的方法
  clearTargetFields() {
    // 重置时间输入框：清空值+重置控件状态
    this.addOpeninghoursForm.controls['opens_from'].reset();
    // 重置下拉框，也可以传入初始值比如'reset('1')'来默认选中Saturday
    this.addOpeninghoursForm.controls['day'].reset();
  }

  addOpeninghours() {
    // 你的提交逻辑
  }
}

步骤2：模板中的按钮和方法一一致 #

同样在表单里添加触发按钮即可，点击后会调用clearTargetFields()方法。

两种方法的区别 #

• 方法一：仅修改控件的值，不会改变表单控件的状态（比如控件还是dirty/touched状态）。
• 方法二：不仅清空值，还会重置控件的所有状态（回到初始的pristine/untouched状态），适合需要严格控制表单状态的场景。

内容的提问来源于stack exchange，提问作者KD-21