<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

SetValue:

Устанавливает значение FormGroup. Он принимает объект, который соответствует структуре группы, с именами элементов управления в качестве ключей.

Этот метод выполняет строгие проверки, поэтому он выдаст ошибку, если вы попытаетесь установить значение несуществующего элемента управления или исключите значение элемента управления.

patchValue:

Исправляет значение FormGroup. Он принимает объект с именами элементов управления в качестве ключей и сделает все возможное, чтобы сопоставить значения с правильными элементами управления в группе.

Он принимает как супер-наборы, так и подмножества группы без выдачи ошибки.