Angular FormGroup不会在patchValue或setValue之后立即更新其值 [英] Angular FormGroup won't update it's value immediately after patchValue or setValue

问题描述

我的表单如下:

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

模板:

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

它使用一个实现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);
}

}

表单中的keyup处理程序如下:

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

问题是，我可以看到this.procedimentoForm.value.conteudo正在更改，因为我在keyup事件处理程序中记录了"console.log(this.procedimentoForm.value.conteudo)".但是，{{procedimentoForm.value.conteudo}}不会更新，除非我将焦点移到编辑器之外.同样，只有在焦点更改后，验证才会更新.我不明白为什么.

解决方案

如果支持值正在更新，但是视图中未反映更改，则可能未将其标记为更新./p>

您可以使用ChangeDetectorRef手动检测更改: https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-锚点

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.

解决方案

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

这篇关于Angular FormGroup不会在patchValue或setValue之后立即更新其值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！