如何将Angular响应式控件与ngModel绑定并解决绑定失效问题

问题原因 #

1. 双向绑定语法错误：Angular的ngModel双向绑定固定写法是[(ngModel)]，你写反了方括号和圆括号的顺序，导致绑定完全失效。
2. 响应式表单与模板驱动表单混用：你已经使用了FormArray、FormGroup等响应式表单API，再混合使用ngModel会出现状态不同步的问题，官方也明确不推荐两种表单模式混用。
3. 属性引用不匹配：你模板中绑定的getCaptionDetail和TS中定义的getDetailText()名称不一致，且你将普通方法直接当做属性调用，没有触发方法执行拿不到返回值。
4. textarea标签内写插值表达式{{this.getDetailText.caption}}无效，表单控件绑定生效后，标签内部的初始文本会被覆盖。

推荐解决方案（纯响应式表单实现，无需ngModel） #

1. 修改index.html模板代码，直接绑定响应式控件实例：

<textarea id="w3review" (change)="textRelease()" [formControl]="captionControl"></textarea>

2. 在component.ts中新增对应控件的getter，直接返回FormControl实例，表单会自动同步输入值：

// 新增getter获取对应caption控件
get captionControl(): FormControl {
  const detailArray = this.detailsControl.get(this.selectedHour) as FormArray;
  const detailGroup = detailArray.at(this.detailIndex) as FormGroup;
  // 此处字段名要和你定义FormGroup时的caption控件名保持一致
  return detailGroup.get('caption') as FormControl;
}

// 调整textRelease方法，直接用上面的getter拿控件即可，无需重复查询
textRelease() {
  const hour = this.selectedHour.slice(0,4);
  const baseKey = this.parse(this.detailIndex, this.selectedHour.slice(0, 4));
  const theKey = hour + baseKey;
  // 直接拿getter返回的控件，已自动同步最新输入值
  this.db.putItem(this.data.dataObject['name'], this.captionControl);
}

兼容方案（必须用ngModel的场景） #

1. 修正模板的绑定语法，同时删掉textarea内部的插值表达式：

<textarea id="w3review" (change)="textRelease()" [(ngModel)]="detailText.caption"></textarea>

2. 将TS中的获取值方法改为getter：

get detailText() {
  const detailArray = this.detailsControl.get(this.selectedHour) as FormArray;
  const detailGroup = detailArray.at(this.detailIndex) as FormGroup;
  return detailGroup.value;
}

注意：该方案仅做兼容使用，混合两种表单模式容易出现状态不一致问题，优先使用纯响应式方案。

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