<textarea> 添加表单控件时默认内容消失为元素命名<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.htmlhttps://angular.io/docs/ts/latest/api/forms/index/formgroup-class.html

setValue：

设置FormGroup的值。它接受与 组的结构，以控制名称为键。

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

patchValue：

修补了FormGroup的值。它接受具有控制的对象 名称为钥匙，并将尽最大努力将值与正确的值匹配 组中的控件。

它接受了组的超级组和子集，而无需投掷 错误。