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 ponent 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: './tinymceponent.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.
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 ponent 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.ponent.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.
Share Improve this question edited Jun 13, 2017 at 15:32 Alaor asked Jun 13, 2017 at 13:54 AlaorAlaor 2,1915 gold badges28 silver badges40 bronze badges1 Answer
Reset to default 4If 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