如何通过FormControl获取<ejs-richtexteditor>纯文本及解决表单验证问题

嘿，我来帮你搞定这两个问题——获取富文本编辑器的纯文本，还有修复表单验证失效的问题：

你之前尝试在formControlName里加:getText()的写法是不对的，这个属性只能绑定表单控件的名称，不能直接调用方法。正确的做法是通过ViewChild获取编辑器实例，再调用getText()方法，同时我们可以把纯文本同步到表单控件里，这样验证也能正常工作。

具体步骤： #

1. 在组件中获取编辑器实例
   首先在你的组件类里，用@ViewChild获取模板里的编辑器引用：

   import { ViewChild } from '@angular/core';
   import { RichTextEditorComponent } from '@syncfusion/ej2-angular-richtexteditor';
   
   // ...
   
   @ViewChild('toolsRTE') toolsRTE: RichTextEditorComponent;
   

2. 同步纯文本到表单控件（实时更新）
   给编辑器绑定valueChange事件，每当内容变化时，获取纯文本并更新表单控件的值：

   onRTEValueChange(event: any) {
     // 获取纯文本内容
     const plainText = this.toolsRTE.getText();
     // 更新表单控件，emitEvent: false避免循环触发事件
     this.faqForm.get('question')?.setValue(plainText, { emitEvent: false });
   }
   

3. 提交时直接获取纯文本
   当表单验证通过后，你可以直接从表单控件获取纯文本（因为我们已经同步过了），或者再次调用getText()：

   if (this.faqForm.valid ) {
     const faq: Faq = {
       Id: 0,
       CategoryId: this.faqForm.get('categoryType').value,
       FAQTopic: this.faqForm.get('question').value, // 这里已经是纯文本
       FAQBody: this.toolsRTE.getText(), // 如果answer也是编辑器，同理处理
       IsActive: true
     };
     // 执行提交逻辑
   }
   

你的验证失效主要有两个原因：一是formControlName的写法错误，二是编辑器自带的minlength/maxLength是基于HTML内容（包含标签）计算的，和你需要的纯文本长度验证不匹配。

具体修复： #

1. 修正模板里的formControlName
   把错误的formControlName="question:getText();"改成正确的控件名称：

   <mat-list-item>
     <ejs-richtexteditor 
       #toolsRTE 
       id='faq_question' 
       [toolbarSettings]='tools' 
       placeholder="Question" 
       showCharCount="true" 
       required 
       formControlName="question"
       (valueChange)="onRTEValueChange($event)"
     >
     </ejs-richtexteditor>
   </mat-list-item>
   

2. 用Angular表单验证器替代编辑器的长度属性
   在创建表单时，给question控件添加Validators.required、Validators.minLength和Validators.maxLength，这样验证会基于纯文本内容生效：

   import { FormBuilder, Validators } from '@angular/forms';
   
   // ...
   
   constructor(private fb: FormBuilder) {
     this.faqForm = this.fb.group({
       question: ['', [
         Validators.required,
         Validators.minLength(13),
         Validators.maxLength(100)
       ]],
       categoryType: [''],
       answer: ['']
     });
   }
   

3. 完善错误提示
   可以补充长度验证的错误提示，让用户更清楚：

   <mat-error *ngIf="faqForm.controls['question'].hasError('required')">
     Question is <strong>required</strong>
   </mat-error>
   <mat-error *ngIf="faqForm.controls['question'].hasError('minlength')">
     Question must be at least 13 characters long
   </mat-error>
   <mat-error *ngIf="faqForm.controls['question'].hasError('maxlength')">
     Question cannot exceed 100 characters
   </mat-error>
   

关键总结： #

• 不要在formControlName里直接调用方法，通过ViewChild获取编辑器实例来调用getText()
• 把纯文本同步到表单控件，让表单验证基于纯文本内容生效
• 用Angular的表单验证器替代编辑器自带的长度属性，确保验证逻辑和你需要的纯文本长度匹配

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