从React转Angular：实现类似onChange效果并固定输入框值

你遇到的问题本质是：Angular的(ngModelChange)会在输入框视图值更新后触发，用户输入字符时，浏览器先把字符追加到当前视图值，再触发事件回调——此时你设置this.total=90虽然更新了模型，但浏览器的输入默认行为已经完成，导致视图和模型短暂不一致，后续输入会继续基于视图值追加内容。

下面提供两种解决方案，其中Reactive Forms方案更贴合React受控组件的思路，推荐优先使用：

方案一：使用Reactive Forms（推荐） #

这种方式和React的受控组件逻辑一致，通过FormControl作为单一数据源，完全控制输入框的状态：

组件TS代码 #

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  // 初始化FormControl，默认值设为90
  totalControl = new FormControl(90);

  ngOnInit(): void {
    // 监听值变化，只要不是90就强制重置
    this.totalControl.valueChanges.subscribe((value) => {
      if (value !== 90) {
        // emitEvent: false 避免setValue再次触发valueChanges，防止循环
        this.totalControl.setValue(90, { emitEvent: false });
      }
    });
  }
}

模板HTML代码 #

<mat-form-field appearance="outline" class="inputBox">
  <input matInput name="total" placeholder="0.00" [formControl]="totalControl" />
</mat-form-field>

方案二：修正模板驱动表单（ngModel）的使用 #

如果坚持用模板驱动表单，可以通过手动触发变更检测，确保视图和模型同步：

组件TS代码 #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  total = 90;

  constructor(private cdr: ChangeDetectorRef) {}

  handleOnChange(field: string, e: any): void {
    this.total = 90;
    // 手动触发变更检测，强制视图同步模型值
    this.cdr.detectChanges();
  }
}

模板HTML代码 #

<mat-form-field appearance="outline" class="inputBox">
  <input matInput name="total" placeholder="0.00" [ngModel]="total"
    (ngModelChange)="handleOnChange('total', $event)" />
</mat-form-field>

如果希望用户输入时完全看不到输入的字符，可以额外添加(keydown)事件阻止默认行为：

<mat-form-field appearance="outline" class="inputBox">
  <input matInput name="total" placeholder="0.00" [ngModel]="total"
    (ngModelChange)="handleOnChange('total', $event)"
    (keydown)="$event.preventDefault()" />
</mat-form-field>

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