<textarea> 添加 formControlName <textarea> 元素时默认内容消失

Question

我正在尝试在 Angular 4.0.2 中创建一个反应式表单，它有一个<textarea>从数据库中提取的带有默认内容的字段。中的内容<textarea>显示没有任何问题，但是当我formControlName="sectionContent"向<textarea>元素添加 时，其中的内容消失了。

<textarea formControlName="sectionContent ">{{ section.sectionContent }}</textarea>

这个问题只发生在<textarea>元素上，因为我<input>在表单中有其他字段，但这些内容仍然出现。

FormGroup 看起来像这样：

this.sectionForm = new FormGroup({
  sectionTitle: new FormControl(),
  sectionContent : new FormControl()
});

有没有人遇到过这个问题？

Answer 1

改为使用默认值

this.sectionForm = new FormGroup({
  sectionTitle: new FormControl(),
  sectionContent : new FormControl(this.section.sectionContent)
});

模板

<textarea formControlName="sectionContent"></textarea>

或使用 setValue/pathValue：

this.sectionForm = new FormGroup({
  sectionTitle: new FormControl(),
  sectionContent : new FormControl()
});
// after received data
this.sectionForm.patchValue({sectionContent: this.section.sectionContent});

演示：https : //plnkr.co/edit/NWgzGdUc9cDkKujPgrl4?p=preview

文档：

https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html

设定值：

设置 FormGroup 的值。它接受一个与组结构匹配的对象，以控件名称作为键。

此方法执行严格检查，因此如果您尝试设置不存在的控件的值或排除控件的值，它将抛出错误。

补丁值：

修补 FormGroup 的值。它接受一个带有控件名称的对象作为键，并将尽最大努力将值与组中的正确控件匹配。

它接受组的超集和子集而不会抛出错误。