PrimeNG p-editor组件无法使用patchValue赋值问题求助

1. 修正代码笔误 #

你的patchEditorForm方法存在参数引用错误，参数是data，但代码里写成了post.content，这会导致无法正确赋值，先修正：

private patchEditorForm = (data: {content: string}) => {
    this.formEditor.patchValue({
      content: data.content
    })
 }

2. 手动同步编辑器实例内容 #

PrimeNG的p-editor组件有时不会自动响应表单控件值的变化，需要通过ViewChild获取编辑器实例，手动设置内容：

步骤1：引入依赖并获取实例 #

在组件中导入ViewChild和Editor，并定义视图引用：

import { ViewChild } from '@angular/core';
import { Editor } from 'primeng/editor';

export class SampleComponent implements OnChanges {
  @Input() data?: {content: string};
  formEditor: FormGroup;
  @ViewChild('contentEditor') contentEditor!: Editor;

  // ... 其他代码
}

步骤2：给模板中的p-editor添加引用变量 #

修改模板，给p-editor加上#contentEditor模板引用：

<p-editor #contentEditor formControlName="content" id="content" placeholder="content..." [style]="{ height: '200px' }"></p-editor>

步骤3：同步表单值与编辑器内容 #

在patchEditorForm方法中，设置表单值后手动更新编辑器：

private patchEditorForm = (data: {content: string}) => {
    this.formEditor.patchValue({
      content: data.content
    });
    // 手动赋值编辑器内容
    if (this.contentEditor) {
      this.contentEditor.value = data.content;
    }
 }

3. 确保视图就绪后执行更新 #

如果ngOnChanges触发时视图尚未初始化，编辑器实例可能还未创建，可通过setTimeout或变更检测确保视图就绪：

方式1：使用setTimeout延迟执行

private patchEditorForm = (data: {content: string}) => {
    this.formEditor.patchValue({
      content: data.content
    });
    setTimeout(() => {
      if (this.contentEditor) {
        this.contentEditor.value = data.content;
      }
    }, 0);
 }

方式2：使用ChangeDetectorRef触发变更检测

import { ChangeDetectorRef } from '@angular/core';

constructor(
    private _fb: FormBuilder,
    private cdr: ChangeDetectorRef
  ) 
 {
  this.formEditor = this._fb.group({
     content: ["", Validators.required]
  })
 }

private patchEditorForm = (data: {content: string}) => {
    this.formEditor.patchValue({
      content: data.content
    });
    this.cdr.detectChanges(); // 触发变更检测，确保视图更新
    if (this.contentEditor) {
      this.contentEditor.value = data.content;
    }
 }

4. 尝试使用setValue替代patchValue #

若patchValue仍不生效，可直接针对表单控件使用setValue：

private patchEditorForm = (data: {content: string}) => {
    this.formEditor.get('content')?.setValue(data.content);
    if (this.contentEditor) {
      this.contentEditor.value = data.content;
    }
 }

内容的提问来源于stack exchange，提问作者Mofiro Jean