<textarea> default content disappears when adding formControlName the <textarea> element

Question

I'm trying to create a Reactive Form in Angular 4.0.2, which has a <textarea> field with default content, pulled from the database. The content in the <textarea> is showing without any issues, but when I add the formControlName="sectionContent" to the <textarea> element, the content from it disappears.

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

This issue is only happening with the <textarea> element, as I have other <input> fields in the form, but those contents are still appearing.

The FormGroup looks like this:

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

Did anyone encountered this issue?

Solution

using default value instead

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

template

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

or using setValue/pathValue:

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

Demo: https://plnkr.co/edit/NWgzGdUc9cDkKujPgrl4?p=preview

Document:

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:

Sets the value of the FormGroup. It accepts an object that matches the structure of the group, with control names as keys.

This method performs strict checks, so it will throw an error if you try to set the value of a control that doesn't exist or if you exclude the value of a control.

patchValue:

Patches the value of the FormGroup. It accepts an object with control names as keys, and will do its best to match the values to the correct controls in the group.

It accepts both super-sets and sub-sets of the group without throwing an error.

Comments

[Csaba]

Yes, I've tried that: sectionContent : new FormControl(this.section.sectionContent) but that throws "TypeError: Cannot read property 'sectionContent' of undefined" and It doesn't accept the 'elvis' operator (.?) either.

[Csaba]

Thank you for your answer @TiepPhan I've tried that each approach, but none of them seems to work.

[Tiep Phan]

no way, please see this demo: plnkr.co/edit/NWgzGdUc9cDkKujPgrl4?p=preview

[Csaba]

Yes, I've checked that, but it seems that your approach is different than mine, as you are not creating a new FormGroup as I do.

[Tiep Phan]

that things are same, this is sort syntax

[Csaba]

By different, I meant that I use only one FormGroup and get the data from Services via RESTfull API

[Tiep Phan]

after it received data from api, just patchValue to update form

[Csaba]

patchValue() actually worked, I had a problem with the type of the section which was 'ISection'. After I changed the type to 'any' it worked. Thanks again @Tiep