Angular FormGroup tidak akan memperbarui nilainya segera setelah patchValue atau setValue

Saya memiliki formulir seperti di bawah ini:

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

Templat:

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

Ia menggunakan komponen khusus yang mengimplementasikan editor 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);
}

}

Penangan keyup dalam formulir terlihat seperti ini:

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

Masalahnya adalah, saya dapat melihat bahwa this.procedimentoForm.value.conteudo berubah karena saya mencatat "console.log(this.procedimentoForm.value.conteudo)" di event handler keyup. Namun, {{procedimentoForm.value.conteudo}} tidak diperbarui sampai saya mengubah fokus editor. Selain itu, validasi tidak akan diperbarui hingga fokus berubah. Saya tidak mengerti alasannya.


person Alaor    schedule 13.06.2017    source sumber


Jawaban (1)


Jika nilai dukungan diperbarui, namun perubahannya tidak terlihat di tampilan, kemungkinan nilai tersebut belum ditandai untuk diperbarui.

Anda dapat menggunakan ChangeDetectorRef untuk mendeteksi perubahan secara manual: https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-anchor

person aaron-bond    schedule 13.06.2017
comment
Ya. menggunakan deteksiChanges() di penangan keyup berhasil. Meskipun tidak jelas bagi saya apa yang terjadi dan mengapa patchValue tidak memperbarui tampilan, jawaban Anda memecahkan masalah. Terima kasih. - person Alaor; 13.06.2017
comment
Saya rasa Anda melewatkan beberapa kode dalam contoh Anda (tidak jelas apa itu procedimentoForm), jadi sulit untuk memberikan detail lebih lanjut tentang mengapa kode tersebut tidak berfungsi seperti yang Anda tunjukkan. - person aaron-bond; 13.06.2017
comment
Saya minta maaf. Saya telah memperbarui pertanyaan dengan kode yang membuat formulir. - person Alaor; 13.06.2017
comment
ChangeDetectorRef hanya akan berfungsi di komponen saja, bagaimana jika saya menambal nilai dari suatu layanan? Bagaimana cara mengatasinya? - person Sol; 28.01.2019