Angular FormGroup won't update it's value immediately after patchValue or setValue

问题

I have a form like below:

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

The template:

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

It uses a custom component that implement a 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);
}

}

The keyup handler in the form looks like this:

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

The problem is, I can see that this.procedimentoForm.value.conteudo is changing because I log "console.log(this.procedimentoForm.value.conteudo)" in the keyup event handler. But, {{procedimentoForm.value.conteudo}} doesn't update until I change the focus out of the editor. Also, the validation won't update until the focus changes. I can't see why.

回答1:

If the backing value is updating, but the changes aren't being reflected in the view, then it's likely that it hasn't been marked for update.

You can use the ChangeDetectorRef to manually detect changes: https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-anchor

来源：https://stackoverflow.com/questions/44523607/angular-formgroup-wont-update-its-value-immediately-after-patchvalue-or-setval

标签

javascript

angular

typescript

angular2-forms