Home > Enterprise >  Input field text validation failing for summernote text area
Input field text validation failing for summernote text area

Time:07-31

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

CodePudding user response:

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
    
  • CodePudding user response:

    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');
    }
    

    CodePudding user response:

    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

    • Related