Eckige FormGroup nicht update es Wert ist, sofort nach patchValue oder setValue

Habe ich ein Formular wie folgt:

 createForm() {
    this.procedimentoForm = this.formBuilder.group({
      nome: ['', Validators.required],
      descricao: ['', Validators.required],
      conteudo: ['', Validators.required],
      solucao: ['', Validators.required],
      mesa: ['', Validators.required]
    });
  }

Vorlage:

<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>

Er verwendet eine benutzerdefinierte Komponente, die die Implementierung eines 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);
}

}

Den keyup-Prozedur in der Formular sieht so aus:

keyupHandlerFunction(event) {
    console.log(this.procedimentoForm);
    this.procedimentoForm.markAsDirty()
    this.procedimentoForm.patchValue({ conteudo: event }, {onlySelf: false, emitEvent: true});
    console.log(this.procedimentoForm.value.conteudo);
  }

Das problem ist, ich kann sehen, dass diese.procedimentoForm.Wert.conteudo verändert, weil ich log " - Konsole.anmelden(das.procedimentoForm.Wert.conteudo)" in den keyup-event-handler. Aber, {{procedimentoForm.Wert.conteudo}} nicht aktualisieren, bis ich den Schwerpunkt aus dem editor. Auch die Validierung wird nicht aktualisiert, bis der Fokus sich ändert. Ich kann nicht sehen, warum.

InformationsquelleAutor Alaor | 2017-06-13
Schreibe einen Kommentar