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