Eckige FormGroup nicht update es Wert ist, sofort nach patchValue oder setValue
Habe ich ein Formular wie folgt:
createForm() {
this.procedimentoForm = this.formBuilder.group({
nome: ['', Validators.required],
descricao: ['', Validators.required],
conteudo: ['', Validators.required],
solucao: ['', Validators.required],
mesa: ['', Validators.required]
});
}
Vorlage:
<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>
Er verwendet eine benutzerdefinierte Komponente, die die Implementierung eines 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);
}
}
Den keyup-Prozedur in der Formular sieht so aus:
keyupHandlerFunction(event) {
console.log(this.procedimentoForm);
this.procedimentoForm.markAsDirty()
this.procedimentoForm.patchValue({ conteudo: event }, {onlySelf: false, emitEvent: true});
console.log(this.procedimentoForm.value.conteudo);
}
Das problem ist, ich kann sehen, dass diese.procedimentoForm.Wert.conteudo verändert, weil ich log " - Konsole.anmelden(das.procedimentoForm.Wert.conteudo)" in den keyup-event-handler. Aber, {{procedimentoForm.Wert.conteudo}} nicht aktualisieren, bis ich den Schwerpunkt aus dem editor. Auch die Validierung wird nicht aktualisiert, bis der Fokus sich ändert. Ich kann nicht sehen, warum.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn die backing-Wert wird aktualisiert, aber die änderungen werden nicht widergespiegelt worden in der Sicht, dann ist es wahrscheinlich, dass es nicht hat gewesen markiert für das update.
Können Sie die
ChangeDetectorRef
manuell Veränderungen erkennen:https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-Anker
procedimentoForm
ist), so ist es schwer zu geben, mehr im detail auf, warum es nicht so funktionieren wie Sie es gezeigt haben.