Angular 10：如何通过TypeScript方法清空未包裹表单的多输入框

别担心，遇到这种零散输入框的批量清空需求，ViewChild因为只能获取单个元素确实不适用，不过我们有几个贴合Angular思想的实用方案，帮你搞定这个问题：

方案一：用ViewChildren批量捕获输入框 #

这是最推荐的方式，只需要给所有要清空的输入框加统一模板引用，就能批量获取并操作它们。

步骤1：给输入框添加统一模板引用 #

在HTML里，给需要清空的输入框都加上同一个模板变量（比如#clearableInput）：

<input type="text" #clearableInput placeholder="输入框1">
<input type="text" #clearableInput placeholder="输入框2">
<input type="number" #clearableInput placeholder="数字输入框">
<button (click)="clearAllInputs()">清空所有输入框</button>

步骤2：在组件类中处理清空逻辑 #

在TypeScript文件中，通过@ViewChildren获取所有带该引用的输入框集合，然后遍历清空：

import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  // 获取所有标记了clearableInput的输入框元素
  @ViewChildren('clearableInput') inputs!: QueryList<ElementRef<HTMLInputElement>>;

  clearAllInputs(): void {
    this.inputs.forEach(input => {
      // 清空输入框值
      input.nativeElement.value = '';
      // 如果输入框绑定了ngModel，手动触发input事件同步变更
      input.nativeElement.dispatchEvent(new Event('input'));
    });
  }
}

小提示：如果你的输入框绑定了ngModel，一定要手动派发input事件，这样Angular的变更检测才能同步更新绑定的数据。

方案二：用类选择器批量操作（适合简单场景） #

如果不想加模板引用，也可以给输入框加统一类名，通过DOM选择器批量获取。不过这种方法要注意在视图初始化完成后再执行：

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements AfterViewInit {
  private targetInputs: NodeListOf<HTMLInputElement> | null = null;

  ngAfterViewInit(): void {
    // 通过类选择器获取所有目标输入框
    this.targetInputs = document.querySelectorAll('.need-clear');
  }

  clearAllInputs(): void {
    if (this.targetInputs) {
      this.targetInputs.forEach(input => {
        input.value = '';
        input.dispatchEvent(new Event('input'));
      });
    }
  }
}

对应的HTML给输入框加统一类名：

<input type="text" class="need-clear" placeholder="输入框1">
<input type="text" class="need-clear" placeholder="输入框2">
<button (click)="clearAllInputs()">清空所有输入框</button>

这种方法虽然简单，但不如ViewChildren贴合Angular的组件化设计，复杂组件里优先用方案一更稳妥。

内容的提问来源于stack exchange，提问作者Hamid Noahdi