如何让输入框在输入错误值时恢复至之前的正确值

你的问题出在当前用的是单向插值绑定{{ myValue }}，用户输入负数后，输入框的value已经被修改，而Angular不会因为this.myValue = this.myValue这种无变化的赋值触发视图更新，所以输入框不会自动恢复。下面给两种可行的实现方式：

方式一：使用双向数据绑定（推荐） #

Angular的双向绑定[(ngModel)]会自动同步视图和数据，配合保存上一次有效值的逻辑，就能实现需求。

1. 首先确保你的模块（比如AppModule）中导入了FormsModule：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他导入项
    FormsModule
  ]
})
export class AppModule { }

2. 修改app.component.html，改用双向绑定：

Type a number below. If it is negative it will be rejected

<input type="number" class="form-control" id="valueId" [(ngModel)]="myValue" (change)="handleValueChange($event)">

3. 修改app.component.ts，新增变量保存上一次有效值：

export class AppComponent {
  myValue: number = 7;
  lastValidValue: number = 7;

  handleValueChange(event: any) {
    const newProposedValue = +event.target.value; // 转换为数字类型
    if (newProposedValue >= 0) {
      this.myValue = newProposedValue;
      this.lastValidValue = newProposedValue; // 更新有效值记录
    } else {
      this.myValue = this.lastValidValue; // 设回上次有效值，双向绑定自动同步输入框
    }
  }
}

方式二：手动更新输入框值（不依赖FormsModule） #

如果不想用双向绑定，可以直接在事件中手动修改输入框的value属性：

修改app.component.ts：

export class AppComponent {
  myValue: number = 7;

  handleValueChange(event: any) {
    const inputElement = event.target as HTMLInputElement;
    const newProposedValue = +inputElement.value;
    
    if (newProposedValue >= 0) {
      this.myValue = newProposedValue;
    } else {
      // 手动将输入框值设回当前有效值
      inputElement.value = this.myValue.toString();
    }
  }
}

为什么原来的else { this.myValue = this.myValue }无效？ #

Angular的变更检测只会在数据真正发生变化时触发视图更新。你把myValue赋值给自己，值没有改变，所以Angular不会重新渲染输入框的value，而用户输入的负数已经修改了输入框的DOM值，自然不会自动恢复。

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