Question

＆lt; p＆gt;我试图在Angular 4.0.2中创建一个Reactive Form，它有一个＆lt; code＆gt;＆lt; textarea＆gt;＆lt; / code＆gt;具有默认内容的字段，从数据库中提取。＆lt; code＆gt;＆lt; textarea＆gt;＆lt; / code＆gt;中的内容显示没有任何问题，但当我添加＆lt; code＆gt; formControlName =＆＃34; sectionContent＆＃34;＆lt; / code＆gt;到＆lt; code＆gt;＆lt; textarea＆gt;＆lt; / code＆gt;元素，它的内容消失。＆lt; / p＆gt; ＆lt; p＆gt;＆lt; code＆gt;＆lt; textarea formControlName =＆＃34; sectionContent＆＃34;＆gt; {{section.sectionContent}}＆lt; / textarea＆lt; / code＆gt;＆gt;＆lt; / p＆gt; ＆lt; p＆gt;此问题仅发生在＆lt; code＆gt;＆lt; textarea＆gt;＆lt; / code＆gt;元素，因为我有其他＆lt; code＆gt;＆lt; input＆gt;＆lt; / code＆gt;表单中的字段，但这些内容仍然出现。＆lt; / p＆gt; ＆lt; p＆gt; FormGroup如下所示：＆lt; / p＆gt; ＆lt; pre＆gt;＆lt; code＆gt; this.sectionForm = new FormGroup（{ sectionTitle：new FormControl（）， sectionContent：new FormControl（） }）; ＆LT; /代码＆GT;＆LT; /预＆GT; ＆lt; p＆gt;有没有人遇到过这个问题？＆lt; / p＆gt;

Answer 1

使用默认值

private void checkOutBook(Book book) {
    checkedOutBooks.add(book);
}

模板

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

或使用setValue / pathValue：

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

演示：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

的setValue：

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

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

patchValue：

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

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

添加formControlName＆lt; textarea＆gt;时，<textarea>默认内容消失元件

1 个答案: