Angular 如何解决输入框重置为默认值失效的问题

问题原因 #

你使用Angular单向属性绑定[value]关联输入框和defaultValue变量时，手动修改输入框内容只会修改DOM原生的value属性，不会变更组件内defaultValue的取值。此时重置操作再次给defaultValue赋值为10，Angular变更检测判定绑定变量没有发生值变化，就不会触发DOM更新，所以重置不生效。

可用解决方案 #

方案1：模板内直接通过引用操作DOM（最简实现） #

给输入框添加模板引用变量，点击按钮时直接给输入框的value赋值，绕过变更检测限制：

<div>
  <label>Select a number </label>
  <input #numInput [value]="defaultValue" />
  <button (click)="numInput.value = defaultValue">Reset to default Number</button>
</div>

这个方案不需要修改TS代码，适合只有简单重置需求的场景。

方案2：组件内通过@ViewChild操作DOM（适合有复杂重置逻辑的场景） #

如果你需要在重置时执行额外逻辑，可以在组件类中拿到输入框的引用操作：

模板代码

<div>
  <label>Select a number </label>
  <input #numInput [value]="defaultValue" />
  <button (click)="onClick()">Reset to default Number</button>
</div>

组件TS代码

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  defaultValue = 10;
  @ViewChild('numInput') numInput!: ElementRef<HTMLInputElement>;

  onClick() {
    this.numInput.nativeElement.value = this.defaultValue;
    // 其他重置逻辑可写在此处
  }
}

方案3：使用双向绑定[(ngModel)]（适合需要同步输入值到组件的场景） #

如果你本来就需要实时获取输入框的内容，用双向绑定更符合Angular的开发规范：

注意：使用[(ngModel)]需要先在对应模块中导入@angular/forms下的FormsModule

模板代码

<div>
  <label>Select a number </label>
  <input [(ngModel)]="inputValue" />
  <button (click)="onClick()">Reset to default Number</button>
</div>

组件TS代码

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  private readonly DEFAULT_VALUE = 10;
  inputValue = this.DEFAULT_VALUE;

  onClick() {
    this.inputValue = this.DEFAULT_VALUE;
  }
}

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