Angular FormGroup不會在patchValue或setValue之后立即更新其值

Question

我有一個如下形式：

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

模板：

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

問題是，我可以看到this.procedimentoForm.value.conteudo正在更改，因為我在keyup事件處理程序中記錄了“ console.log（this.procedimentoForm.value.conteudo）”。 但是，{{procedimentoForm.value.conteudo}}不會更新，除非我將焦點移到編輯器之外。 同樣，只有在焦點更改后，驗證才會更新。 我不明白為什么。

Answer 1

如果支持值正在更新，但是更改未在視圖中反映出來，則很可能尚未將其標記為要更新。

您可以使用ChangeDetectorRef手動檢測更改： https : ChangeDetectorRef