Angular FormGroup wird nicht aktualisiert seinen Wert unmittelbar nach patchValue oder setValue

Question

Ich habe eine Form wie unten:

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

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

Es hat eine benutzerdefinierte Komponente verwendet, die eine TinyMCE Editor implementieren :

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); 
} 

}

Der keyup Handler in Form sieht wie folgt 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, kann ich sehen, dass this.procedimentoForm.value.conteudo ändert, weil ich „console.log (this.procedimentoForm.value anmelden. contudo) "im keyup Event Handler. Aber {{procedimentoForm.value.conteudo}} wird nicht aktualisiert, bis ich den Fokus aus dem Editor heraus ändere. Außerdem wird die Validierung erst aktualisiert, wenn sich der Fokus ändert. Ich kann nicht sehen warum.

Answer 1

Wenn der Hintergrundwert aktualisiert wird, die Änderungen jedoch nicht in der Ansicht angezeigt werden, wurde er wahrscheinlich nicht für die Aktualisierung markiert.

können Sie die ChangeDectorRef verwenden, um manuell Änderungen zu erkennen: https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-anchor