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

Question

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.

score 4 · Accepted Answer · edited Apr 24 '18 at 19:12

4

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

edited Apr 24 '18 at 19:12

LHM

721
12
31

answered Jun 13 '17 at 14:02

aaron-bond

3,101
3
24
41

Yes. using detectChanges() in the keyup handler did the job. While it isn't clear to me what's happening and why patchValue won't update the view, your answer solved the issue. Thank you. – Alaor Jun 13 '17 at 14:19
I think you missed some code in your example (it isn't clear what `procedimentoForm` is), so it's hard to give further detail on why it didn't work as you've shown. – aaron-bond Jun 13 '17 at 14:22
I'm sorry. I've updated the question with the code that creates the form. – Alaor Jun 13 '17 at 15:32
ChangeDetectorRef will work in component only, what if I am patching the value from a service? How to handle that? – Harshal Jan 28 '19 at 11:45

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

1 Answers1

Linked