Input field text validation failing for summernote text area

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

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