角FormGroup不会更新它的patchValue后立即值的setValue

我有一个表格如下图所示：角FormGroup不会更新它的patchValue后立即值的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); 
    }

的问题是，我可以看到，因为我日志“的console.log是this.procedimentoForm.value.conteudo正在改变（this.procedimentoForm.value。 “在keyup事件处理程序中。但是，{{procedimentoForm.value.conteudo}}不会更新，直到我将焦点从编辑器中移出。此外，验证不会更新，直到焦点更改。我看不出为什么。

来源

2017-06-13 Alaor

如果支持值正在更新但更改没有反映在视图中，很可能它没有被标记为更新。

可以使用ChangeDectorRef手动检测更改： https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-anchor

来源

2017-06-13 14:02:42 Askanison4

是。在keyup处理程序中使用detectChanges（）完成了这项工作。尽管我不清楚发生了什么以及为什么patchValue不会更新视图，但您的答案可以解决问题。谢谢。 – Alaor

我想你错过了你的例子中的一些代码（它不清楚'procedimentoForm'是什么），所以很难进一步详细说明它为什么不能像你所显示的那样工作。 – Askanison4

对不起。我用创建表单的代码更新了问题。 – Alaor

角FormGroup不会更新它的patchValue后立即值的setValue

回答

相关问题