Below is a form I have created:
createForm() {
this.procedimentoForm = this.formBuilder.group({
nome: ['', Validators.required],
descricao: ['', Validators.required],
conteudo: ['', Validators.required],
solucao: ['', Validators.required],
mesa: ['', Validators.required]
});
}
This is the template:
<form [formGroup]="procedimentoForm" class="ui form">
{{procedimentoForm.value.conteudo}}
<div class="field">
<label>Description</label>
<input type="text" placeholder="Description" formControlName="descricao">
</div>
<div class="field">
<label>Content</label>
<tinymce [elementId]="'conteudo'" (onEditorKeyup)="keyupHandlerFunction($event)"></tinymce>
</div>
</form>
The form utilizes a custom component that includes a TinyMCE editor:
import { Component, AfterViewInit, ViewChild, EventEmitter, forwardRef, ElementRef, OnDestroy, Input, Output } from '@angular/core';
import {
ControlValueAccessor,
NG_VALUE_ACCESSOR,
NG_VALIDATORS,
FormControl,
Validator
} from '@angular/forms';
@Component({
selector: 'tinymce',
templateUrl: './tinymce.component.html',
})
export class TinyMCEComponent implements AfterViewInit, OnDestroy {
@Input() elementId: String;
@Output() onEditorKeyup = new EventEmitter();
editor;
ngAfterViewInit() {
tinymce.init({
selector: '#' + this.elementId,
plugins: ['link', 'paste', 'table'],
skin_url: '../assets/skins/lightgray',
setup: editor => {
this.editor = editor;
editor.on('keyup', () => {
const content = editor.getContent();
this.onEditorKeyup.emit(content);
});
}
});
}
ngOnDestroy() {
tinymce.remove(this.editor);
}
}
The keyup handler function in the form is as follows:
keyupHandlerFunction(event) {
console.log(this.procedimentoForm);
this.procedimentoForm.markAsDirty()
this.procedimentoForm.patchValue({ conteudo: event }, {onlySelf: false, emitEvent: true});
console.log(this.procedimentoForm.value.conteudo);
}
The issue I am facing is that although I can see that this.procedimentoForm.value.conteudo is changing because I log "console.log(this.procedimentoForm.value.conteudo)" in the keyup event handler. The displayed content in {{procedimentoForm.value.conteudo}} does not update until I change focus out of the editor. Also, the validation does not update until the focus changes. I am unable to pinpoint the reason for this behavior.