Angular模板驱动式Material表单初始化时自动重置问题

我太懂你遇到的这个坑了！用*ngIf隐藏表单的时候，每次触发显示都会把整个表单组件销毁再重建，这就是为啥你的预设默认值被清空的原因。下面给你几个我实际项目里用过的靠谱解决方案：

• 改用[hidden]替代*ngIf
  这是最省心的方案，因为[hidden]只是给元素设置display:none，不会销毁组件，表单的状态和绑定的默认值都会完整保留。示例代码如下：

  <form [hidden]="!showForm" #userForm="ngForm">
    <mat-form-field>
      <input matInput name="username" [(ngModel)]="userInfo.username">
    </mat-form-field>
    <!-- 其他Material表单字段 -->
  </form>
  <button (click)="showForm = !showForm">切换表单显示</button>
  

  小提醒：别给表单加display: block !important这类会覆盖[hidden]的CSS样式，不然这个方法会失效。

• 保留*ngIf但在显示时重新赋值默认值
  如果你因为性能或其他原因必须用*ngIf，那可以在点击按钮显示表单的瞬间，重新给绑定的模型赋值预设值。示例：
  组件类代码：

  userInfo = { username: '' };
  showForm = false;
  // 提前定义好预设默认值
  defaultUserInfo = { username: '默认用户名' };
  
  toggleFormDisplay() {
    this.showForm = !this.showForm;
    if (this.showForm) {
      // 用对象展开避免引用问题，确保表单能识别到值变化
      this.userInfo = { ...this.defaultUserInfo };
    }
  }
  

  模板代码：

  <form *ngIf="showForm" #userForm="ngForm">
    <mat-form-field>
      <input matInput name="username" [(ngModel)]="userInfo.username">
    </mat-form-field>
  </form>
  <button (click)="toggleFormDisplay()">切换表单显示</button>
  

• 用ViewChild手动控制表单赋值
  要是你需要更精细的控制（比如只重置特定字段），可以通过ViewChild获取表单实例，在表单重建后手动设置值：
  组件类代码：

  import { ViewChild, NgForm } from '@angular/core';
  
  @ViewChild('userForm') userForm!: NgForm;
  showForm = false;
  defaultUsername = '默认用户名';
  
  toggleFormDisplay() {
    this.showForm = !this.showForm;
    if (this.showForm) {
      // 用setTimeout确保表单初始化完成后再赋值
      setTimeout(() => {
        this.userForm.form.patchValue({
          username: this.defaultUsername
        });
      });
    }
  }
  

  模板里给表单加上#userForm="ngForm"标记即可。

另外要注意：模板驱动表单的ngModel尽量绑定对象的属性，别直接绑定基本类型（比如[(ngModel)]="username"），不然可能会出现变更检测异常，导致值不更新的问题。

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