如何重置Angular表单中progress/angular-kendo-editor控件的值

你尝试的常规响应式表单操作未生效，是因为Kendo Editor组件内部独立维护富文本编辑状态，仅修改FormControl的模型值默认不会触发组件内部的视图更新，两者没有实现自动同步。

以下是两种可行的实现方案：

方案1：直接操作编辑器实例（推荐，适配所有版本） #

步骤1：模板中添加模板引用变量 #

<kendo-editor
  #kendoEditor
  formControlName="note"
></kendo-editor>

步骤2：组件类中获取编辑器实例 #

// 顶部导入依赖
import { ViewChild } from '@angular/core';
import { EditorComponent } from '@progress/kendo-angular-editor';

// 组件类内部声明实例
@ViewChild('kendoEditor') kendoEditor: EditorComponent;

步骤3：执行重置操作 #

resetNoteEditor() {
  // 清空编辑器内部内容，可避免残留空标签
  this.kendoEditor.execCommand('selectAll');
  this.kendoEditor.execCommand('delete');
  // 同步更新表单控件状态
  this.requestForm.controls.note.setValue('');
  this.requestForm.controls.note.markAsPristine();
  this.requestForm.controls.note.markAsUntouched();
}

方案2：通过值绑定实现自动同步（适合新版本） #

在模板中给编辑器添加值绑定，后续直接调用表单方法即可同步更新编辑器：

<kendo-editor
  formControlName="note"
  [value]="requestForm.get('note')?.value"
  (valueChange)="requestForm.get('note')?.setValue($event)"
></kendo-editor>

配置完成后，直接调用常规表单重置方法即可生效：

this.requestForm.controls.note.reset('');

常见问题处理 #

如果重置后编辑器残留<p>&nbsp;</p>这类空标签，可以在新版本Kendo Editor中配置emptyValue属性指定空值展示：

<kendo-editor
  formControlName="note"
  emptyValue=""
  [value]="requestForm.get('note')?.value"
  (valueChange)="requestForm.get('note')?.setValue($event)"
></kendo-editor>

内容的提问来源于stack exchange，提问作者vishnu somanath