CODEWITHSUNDEEP
angularjstinymcetextareang-messages
lito
lito

Reputation: 3125

Validate textarea with Angular ng-messages when using Tinymce (ui-tinymce)

How to validate using ng-messages like ng-maxlength when the <textarea> has a ui-tinymce attribute?

Or is there a better way?

<div class="form-group">
    <div class="col-sm-12">
        <label>Description</label>
        <p class="small">Please provide as much detailed information as possible.</p>
        <textarea name="description" class="form-control required" ui-tinymce="tinymceOptions" ng-model="aC.testData.description"
                  ng-maxlength="100" required></textarea>
        <div class="help-block" ng-messages="mainForm.description.$error" ng-show="mainForm.description.$touched">
            <p ng-message="required">A description is required.</p>
            <p ng-message="maxlength">Description must not exceed 100 characters.</p>
        </div>
    </div>
</div>

Upvotes: 2

Views: 1706

Answers (2)

TroodoN-Mike
TroodoN-Mike

Reputation: 16175

Adding forced_root_block: "" to the tinymce options should also work. By default it will not add <p></p> from the start.

Upvotes: 1

Michael Fromin
Michael Fromin

Reputation: 13746

The issue you are seeing is that the standard directives just count characters so a simple (empty) HTML sample:

<p></p>

Would indeed show as 7 characters when in reality there is no "visible" content. I built a custom directive for another editor and what I ended up doing is using jQuery's .text() function against the HTML. This removes all of the HTML tags and provides an approximation for the number of actual text characters in the editor. This is a portion of the code in the diective: 

var jStrippedString = jQuery(modelValue).text().trim();
return (maxlength < 0) || ngModelCtrl.$isEmpty(jStrippedString) || (jStrippedString.length <= maxlength);

I believe that you would want to create a custom Attribute directive that allows you to grab the model data for the editor and perform this validation yourself.

Upvotes: 1

Related Questions