I have a form like below:

 createForm() {

    this.procedimentoForm = this.formBuilder.group({

      nome: ['', Validators.required],

      descricao: ['', Validators.required],

      conteudo: ['', Validators.required],

      solucao: ['', Validators.required],

      mesa: ['', Validators.required]

    });

  }

The template:

<form [formGroup]=procedimentoForm class=ui form>

  {{procedimentoForm.value.conteudo}}





  <div class=field>

    <label>Descrição</label>

    <input type=text placeholder=Descrição formControlName=descricao>

  </div>



  <div class=field>

    <label>Conteúdo</label>

    <tinymce [elementId]='conteudo' (onEditorKeyup)=keyupHandlerFunction($event)></tinymce>

  </div>



</form>

It uses a custom component that implement 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 in the form looks like this:

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 problem is, I can see that this.procedimentoForm.value.conteudo is changing because I log console.log(this.procedimentoForm.value.conteudo) in the keyup event handler. But, {{procedimentoForm.value.conteudo}} doesn't update until I change the focus out of the editor. Also, the validation won't update until the focus changes. I can't see why.