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