Angular中同时使用[(ngModel)]与formControlName时patchValue失效如何解决？

问题根因 #

你当前的实现同时给表单控件绑定了响应式表单的formControlName指令和模板驱动表单的[(ngModel)]指令，相当于单个输入控件同时存在两个独立的状态源：

• patchValue方法只会修改响应式表单FormControl实例的状态
• 视图渲染时会优先取[(ngModel)]绑定的data对象的属性值
  二者状态不同步就会导致patchValue调用后视图没有更新的问题，Angular官方从V6开始也不推荐这种混合使用两种表单模式的写法，默认会抛出使用警告。

保留ngModel的解决方案 #

方案1：优先更新ngModel绑定的数据源（推荐） #

既然业务重度依赖ngModel绑定的data对象，直接把默认值先赋值给data，再同步更新响应式表单状态即可，修改TS代码如下：

const componentIns = dialogRef.componentInstance;
// 先给ngModel绑定的data赋值，视图会通过双向绑定自动更新
componentIns.data = {
  scanName: cal.scannerName,
  caliPrice: cal.calibrationPrice,
  caliDescription: cal.calibrationDescription
};
// 再同步更新响应式表单的状态，保证form对象的状态和data一致
componentIns.form.patchValue(componentIns.data);

方案2：关闭混合使用的警告并明确同步规则 #

如果需要保留现有的patchValue写法，可以先关闭Angular的混合使用警告，再给每个控件指定ngModel的同步时机：

1. 在引入ReactiveFormsModule的模块中添加配置，关闭警告：

@NgModule({
  imports: [
    // 其他依赖
    FormsModule,
    ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'})
  ]
})
export class YourModule { }

2. 给每个表单控件添加ngModelOptions配置，明确状态同步时机：

<input matInput 
  formControlName="scannerName" 
  [(ngModel)]="data.scanName" 
  [ngModelOptions]="{updateOn: 'change'}"
  maxlength="50">

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