输入框有值时自动调用函数的实现问题

看起来你在Angular里实现输入框值变化触发函数的功能时遇到了不符合预期的问题，我来帮你梳理下问题所在并给出解决方案：

你的现有代码存在的核心问题 #

1. 函数重复触发：你同时绑定了(ngModelChange)和(input)两个事件，这两个事件在输入框内容变化时都会触发，导致didModify每次输入被调用两次，计数器增长速度翻倍。
2. 参数传递错误：(ngModelChange)="didModify(event)"里的event是无效的——ngModelChange传递的是更新后的ngModel值，不是DOM事件对象，这样写会导致参数为undefined。

修正方案一：使用ngModelChange跟踪模型值变化（推荐） #

只保留ngModelChange事件绑定，它更贴合Angular的表单数据流，能直接拿到更新后的输入值：

修正后的HTML代码

<div class="pb-1">
  <input 
    maxlength="10" 
    placeholder="Text" 
    [(ngModel)]="text1"
    (ngModelChange)="didModify($event)"
  >
</div>
<p>{{changeCounter}}</p>

修正后的Component代码

如果你的需求是输入框有值时才触发逻辑，可以在函数里加入非空判断：

text1 = 'test count';
changeCounter = 0;

didModify(newValue: string) {
  // 去除首尾空格后判断是否有内容
  if (newValue.trim()) {
    this.changeCounter++;
  }
}

修正方案二：使用原生input事件 #

如果你更习惯操作原生DOM事件，也可以只保留(input)绑定，此时函数可以接收DOM事件对象：

HTML代码

<div class="pb-1">
  <input 
    maxlength="10" 
    placeholder="Text" 
    [(ngModel)]="text1"
    (input)="didModify($event)"
  >
</div>
<p>{{changeCounter}}</p>

Component代码

text1 = 'test count';
changeCounter = 0;

didModify(event: Event) {
  const inputValue = (event.target as HTMLInputElement).value;
  if (inputValue.trim()) {
    this.changeCounter++;
  }
}

进阶需求：仅当输入框从无值变为有值时触发 #

如果你的需求是只有输入框从空变为有内容时才触发一次函数，可以跟踪之前的值来判断：

text1 = 'test count';
changeCounter = 0;
private previousValue = '';

didModify(newValue: string) {
  const currentValue = newValue.trim();
  // 只有之前为空，现在变为非空时才执行逻辑
  if (!this.previousValue && currentValue) {
    this.changeCounter++;
  }
  this.previousValue = currentValue;
}

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