Summernote 文本区域的输入字段文本验证失败

Question

我正在使用 Summernote 进行富文本编辑。 我的输入字段具有必需的属性。

  <input
              required
              id="summernote"
              formControlName="description"
              [ngxSummernote]="config"
             
            />

我有提交按钮。 如果文本区域为空、原始或无效，它将被禁用。 下面的代码。

<button
              mat-raised-button
              class="btn btn-danger pull-right"
              type="submit"
              (click)="submitDoc()"
              [disabled]="
                questionFormGroup.pristine || questionFormGroup.invalid
              "
            >
              Post Question
            </button>

如果我在summernote编辑器中复制粘贴一些文本，按钮将启用但如果我执行ctrl + a并删除文本编辑器中存在的所有文本，则应禁用该按钮，因为文本区域内没有文本。 如果我提交表单，文本将包含如下值：

<br><div>
</div><div>
</div><div>
</div><div>
</div><div>
</div><div>
</div><div>
</div><div>
</div><div>
</div><div>

我如何解决这个问题到summernote。 此处启用按钮的图像和此处的文本区域内容。

这是我的表单组：

createQuestionFormGroup(): void {
    this.questionFormGroup = this.formBuilder.group({
      heading: undefined,
      description: undefined,
    });
  }

Answer 1

将内容直接粘贴到ngxSummernote库文本框中后出现问题，没有更新 formControl 的touched / pristine formControl的表单控件。

要解决此问题，您可以在config的callbacks选项中实现onPaste回调 function 。

config = {
  ...,
  callbacks: {
    onPaste: (ne) => {
      var bufferText = (ne.originalEvent || ne).clipboardData.getData('Text');
      if (bufferText) {
        // calling onTouched method to set formControl touched/pristine state update.
        this.summernote.onTouched();
      }
    },
  },
};

更新了 Stackblitz

Answer 2

isEmpty

返回编辑器内容是否为空。 您可以实现此方法来检查内容。

编辑区域需要<p><br></p>获得焦点，即使编辑器内容为空。 所以 Summernote 支持这种方法来帮助检查编辑器内容是否为空。

if ($('#summernote').summernote('isEmpty')) {
  alert('editor content is empty');
}

Answer 3

这是解决您的特定问题的另一种方法。 使用以下方法收集 Summernote 文本区域中存在的 HTML

var text = $('#body-summernote').summernote('code');

去掉 var 文本中存在的 HTML 标签。

 $(text).text()

您将摆脱所有标签，例如和

. 您将得到纯文本。 使用检查其长度。 基于此，您可以找到文本区域是否具有一些有效值。 如下所示调用.trim() 很重要。

 $(text).text().trim().length > 1