Angular模板驱动表单中通过ViewChild重置NgModel绑定输入值问题

嘿，我来帮你搞定这个问题！你遇到的情况是因为直接修改NgModel实例的value属性并不会触发Angular的双向绑定更新——毕竟双向绑定的核心是你绑定的数据源loginDetail.username，NgModel的value只是当前值的一个只读镜像而已。

下面给你两种可行的正确重置方式：

方式一：直接修改绑定的数据源（最推荐） #

既然你用了[(ngModel)]="loginDetail.username"，那直接修改这个数据源属性就能同步更新视图和NgModel的值，简单直接：

ngOnInit() {
  if (this.loginDetail.username === "username") {
    this.loginDetail.username = '';
  }
}

方式二：通过NgModel内部的FormControl来设置值 #

如果你一定要通过ViewChild获取的NgModel实例来操作，可以用它内部的control属性（也就是FormControl）的setValue()方法，这会正确触发绑定更新：

ngOnInit() {
  if (this.un.value === "username") {
    this.un.control.setValue('');
  }
}

额外提示：处理动态变化的值 #

如果你的username值是组件初始化后才被赋值的（比如从后端接口获取），ngOnInit可能抓不到这个变化。这时候可以监听NgModel的valueChanges observable来实时响应值的变化：

import { Subscription } from 'rxjs';

export class LoginComponent {
  @ViewChild('username') un: NgModel;
  loginDetail = { username: '' };
  private valueSubscription: Subscription;

  ngAfterViewInit() {
    this.valueSubscription = this.un.valueChanges.subscribe(value => {
      if (value === "username") {
        this.loginDetail.username = '';
        // 或者用 this.un.control.setValue('');
      }
    });
  }

  ngOnDestroy() {
    // 别忘了取消订阅，避免内存泄漏
    if (this.valueSubscription) {
      this.valueSubscription.unsubscribe();
    }
  }
}

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