Estoy tratando de crear un Formulario reactivo en Angular 4.0.2, que tiene un campo <textarea> con contenido predeterminado, extraído de la base de datos. El contenido en <textarea> se muestra sin ningún problema, pero cuando agrego formControlName="sectionContent" al elemento <textarea> , el contenido desaparece.
<textarea formControlName="sectionContent ">{{ section.sectionContent }}</textarea >
Este problema solo ocurre con el elemento <textarea> , ya que tengo otros campos <input> en el formulario, pero esos contenidos siguen apareciendo.
El FormGroup se ve así:
this.sectionForm = new FormGroup({ sectionTitle: new FormControl(), sectionContent : new FormControl() });¿Alguien encontró este problema?
utilizando el valor predeterminado en su lugar
this.sectionForm = new FormGroup({ sectionTitle: new FormControl(), sectionContent : new FormControl(this.section.sectionContent) });modelo
<textarea formControlName="sectionContent"></textarea>o usando setValue/pathValue:
this.sectionForm = new FormGroup({ sectionTitle: new FormControl(), sectionContent : new FormControl() }); // after received data this.sectionForm.patchValue({sectionContent: this.section.sectionContent});Demostración: https://plnkr.co/edit/NWgzGdUc9cDkKujPgrl4?p=preview
Documento:
https://angular.io/docs/ts/latest/api/forms/index/FormControl-class.html https://angular.io/docs/ts/latest/api/forms/index/FormGroup-class.html
valor ajustado:
Establece el valor de FormGroup. Acepta un objeto que coincida con la estructura del grupo, con nombres de control como claves.
Este método realiza comprobaciones estrictas, por lo que generará un error si intenta establecer el valor de un control que no existe o si excluye el valor de un control.
valor del parche:
Parchea el valor de FormGroup. Acepta un objeto con nombres de control como claves y hará todo lo posible para hacer coincidir los valores con los controles correctos en el grupo.
Acepta tanto superconjuntos como subconjuntos del grupo sin arrojar un error.