Angular中form.reset()后[(ngModel)]与变量绑定断开问题求助

问题场景 #

调用NgForm.reset()后，绑定了[(ngModel)]="myCodeTable.tableId"的输入框无法同步显示变量值。此前直接在代码中设置this.myCodeTable.tableId=2时，输入框能正常显示数值；但点击New按钮执行myForm.reset()后再给变量赋值，输入框始终为空。

现有代码 #

HTML部分 #

<form (ngSubmit)="onSave(f)" #f="ngForm">
  <table class="table-code-table">
    <tr>
      <td class="titleEnglish">
        Table Code
      </td>
      <td>
        <input type="text"
               on-focusout="onLeave()"
               [(ngModel)]="myCodeTable.tableId"  
               id="tableId" 
               class="inputEnglish"
               ngModel
               name="tableId"
               #tableId="ngModel"
               #tableIdEle        
               minlength="1"
               maxlength="3"
               pattern="[0-9]*"
               [attr.disabled]="lockTableCode ? 'disabled' : null"
               required>
      </td>
    </tr>
  </table>

  <button (click)="onNew(f)"
          type="button"
          [ngClass]="{rentButton: showAdd, rentButtonDisabled: !showAdd}"
          [attr.disabled]="!showAdd ? 'disabled' : null">
    New
  </button>
</form>

组件TS部分 #

onNew (myForm: NgForm) {
  myForm.reset();
  this.myCodeTable.tableId=2;    
}

解决思路 #

原因 #

NgForm.reset()会将表单所有控件的状态重置为初始值（默认是空），这个操作会覆盖ngModel绑定的变量值。之后直接给myCodeTable.tableId赋值时，表单控件的状态已经和变量脱节，双向绑定的同步机制未触发，导致视图不更新。

可行方案 #

1. 通过reset()参数直接设置初始值
   这是最规范的方式，reset()支持传入一个对象，对应表单控件的name属性，设置后表单和绑定变量会自动同步：

   onNew(myForm: NgForm) {
     // 传入与表单name匹配的初始值
     myForm.reset({ tableId: 2 });
     // 同步更新绑定对象（可选，ngModel会自动同步）
     this.myCodeTable.tableId = 2;
   }
   

2. 手动触发变更检测
   如果必须先执行reset()再赋值，可以注入ChangeDetectorRef手动触发视图更新：

   import { ChangeDetectorRef } from '@angular/core';
   
   constructor(private cdr: ChangeDetectorRef) {}
   
   onNew(myForm: NgForm) {
     myForm.reset();
     this.myCodeTable.tableId = 2;
     // 手动通知Angular检测变更并更新视图
     this.cdr.detectChanges();
   }
   

3. 清理冗余的ngModel声明
   输入框中同时写了[(ngModel)]="myCodeTable.tableId"和单独的ngModel属性，属于冗余声明，建议删除单独的ngModel，避免绑定逻辑冲突：

   <input type="text"
          on-focusout="onLeave()"
          [(ngModel)]="myCodeTable.tableId"  
          id="tableId" 
          class="inputEnglish"
          name="tableId"
          #tableId="ngModel"
          #tableIdEle        
          minlength="1"
          maxlength="3"
          pattern="[0-9]*"
          [attr.disabled]="lockTableCode ? 'disabled' : null"
          required>
   

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