角度FormGroupはそれが私は以下のような形を持ってすぐにpatchValue後またはsetValueの

Question

値だ更新されません

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

それはTinyMCEのエディタを実装するカスタム・コンポーネントを使用しています：

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

}

形でkeyUpイベントハンドラは次のようになります。問題がある

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

、私は「はconsole.log（this.procedimentoForm.valueログのでthis.procedimentoForm.value.conteudoが変化していることがわかります。 conteudo） "をkeyupイベントハンドラに追加します。しかし、{{procedimentoForm.value.conteudo}}はエディタからフォーカスを外すまで更新されません。また、フォーカスが変更されるまで、検証は更新されません。なぜ私は見ることができません。

Answer 1

バッキング値は更新されていますが、変更がビューに反映されていない場合は、更新マークが付けられていない可能性があります。

は、手動で変更を検出するためにChangeDectorRefを使用することができます。 https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-anchor