Angular 11 mat-input删除内容时显示[object HTMLInputElement]问题求解

你遇到的现象本质是输入框绑定的变量被赋值为HTMLInputElement DOM对象本身，对象转为字符串后就会显示为[object HTMLInputElement]，结合你的场景，最常见的原因如下：

• 最核心的高频原因是handleInputChange方法内的短路运算容错逻辑错误：
  JS中空字符串''属于假值，如果你在方法内写了类似this.bindValue = event.target.value || event.target这类容错代码，当输入内容清空、event.target.value为空字符串时，短路运算会直接取后面的event.target（也就是input DOM元素本身）赋值给绑定变量，最终渲染时对象转字符串就出现了异常内容。正常输入时value是非空字符串，所以不会触发这个问题，完全匹配你遇到的现象。
• 第二类常见原因是模板事件传参错误：
  如果你在模板的input事件绑定中，直接把$event.target作为参数传给handleInputChange，而方法内没有明确取.value就直接赋值给绑定变量，也会出现同样问题。
• 小概率场景：你同时使用了[(ngModel)]双向绑定和input事件手动更新值，两边逻辑冲突导致赋值错误，或是自定义表单控件的ControlValueAccessor处理空值的逻辑存在问题。

对应的解决方案如下：

1. 优先检查handleInputChange方法的取值逻辑，修改容错写法：
   不要使用短路运算直接兜底，改为显式处理空值，参考代码：

   handleInputChange(event: Event): void {
     const inputEl = event.target as HTMLInputElement;
     // 哪怕value是空字符串也直接取，不要用||兜底为其他非字符串值
     this.bindValue = inputEl.value;
     // 如果需要兜底默认值，使用空值合并运算符判断，比如：
     // this.bindValue = inputEl.value ?? ''
   }
   

2. 检查模板的事件绑定写法，确保传参正确：
   模板中应该传递完整的事件对象，不要直接传元素本身，参考写法：

   <mat-input (input)="handleInputChange($event)" [(ngModel)]="bindValue"></mat-input>
   

3. 如果使用了响应式表单，检查setValue/patchValue的调用参数，确认没有把DOM元素对象作为值传入。

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