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

Question

I am using Summernote for rich text editing. My input field has the required attribute.

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

I have the Submit button. It will be disabled if the the text area is empty or pristine or invalid. code below.

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

If I copy-paste some text inside my summernote editor, the button will get enable But if I do ctrl+a and remove all the text present inside text editor, the button should be disabled since there is no text inside text-area. If I submit the form, the text are will contain values like below:

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

How do I resolve this wrt to summernote. Button enabled image here and text area contents here.

Here is my formGroup:

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

Answer 1

There is a problem after pasting content directly inside ngxSummernote library textbox isn't updating the form control touched / pristine state of the formControl .

To fix the issue you can implement onPaste callback function inside config 's callbacks option.

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();
      }
    },
  },
};

Updated Stackblitz

Answer 2

isEmpty

Returns whether editor content is empty or not. You can implement this method to check contents.

The editing area needs <p><br></p> for focus, even if the editor content is empty. So Summernote supports this method for helping to check if editor content is empty.

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

Answer 3

Here is another way of resolving your particular issue. Collect the HTML that is present inside your Summernote text-area using

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

Strip off the HTML tags present in the var text.

 $(text).text()

You'll get rid of all the tags like and

. You'll be left with plain text. Check its length using. Based on this, you can find whether the text-area is having some valid values or not. Calling.trim() as shown below is important.

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