How to apply max-length validation on text-angular

[cbunhok]

Dear All,

I have problem to apply max-length validation on text-angular. When I added this validation on it, it always raise error though the text length is smaller than number determined in validation.

Anyone has any solution?
Thanks you in advance.

[SimeonC]

Hi, are you using the 'ta-max-text' attribute? This is what we call the max-length validation.

EDIT Made the sentence say what I meant not what I wrote...

[cbunhok]

@SimeonC
Oh....I've not used it, but I've used the directive of AngularJS "ng-maxlength" to check the maximum length which use can input. Which one should I use to check this kind of validation?

[SimeonC]

Definitely ta-max-text. We tried using ng-maxlength but it's doesn't work as we store HTML in the model variable to preserve formatting, this means that when it looks like the content is just Some Content... it really is <p>Some Content...</p> so ngMaxlength thinks the length is 22 whereas you probably want it to validate a length of 15.

Does that make sense?

[cbunhok]

@SimeonC
Thanks you very much.

[cbunhok]

@SimeonC
Could you give an example to use "ta-max-text" to check validation text length?

[SimeonC]

Sure, very simple example: <div text-angular ng-model="htmlcontent" ta-max-text="40"></div>, that will set the validation to false if they have over 40 characters in the editor.

[cbunhok]

@SimeonC
I wrote as your example. However, the form still submitted and did not show error message underneath.

[SimeonC]

I think that's going to be an issue with your form not the validation. Want to post your form code up so I can have a look?

[cbunhok]

My form code is written in haml format:

%form{"name" => "aboutUsForm", "ng-submit" => "submit(aboutUsForm.$valid)", "novalidate" => true, layout: "vertical", "layout-align" => "space-around"}
  %material-input-group{"ng-class" => "{'has-error': aboutUsForm.description.$invalid && submitted}"}
    %label Description
    %text-angular{name: "description", "ng-model" => "catalogItem.html_text", "ta-toolbar" => "[['bold','italics','ul']]", class: "description input-field", "required" => true, "ta-max-text" => 4}

  %span{ "ng-show" => "aboutUsForm.description.$error.taMaxText", class: "help-block" } Description must not be longer than 1000 chars.

[SimeonC]

Try

%text-angular{name: "description", "ng-model" => "catalogItem.html_text", "ta-toolbar" => "[['bold','italics','ul']]", class: "description input-field", "required" => true, "ta-max-text" => "4"}

I don't use haml at all so I'm guessing a bit here, our validation tests may give you a better idea here: https://github.com/fraywing/textAngular/blob/8d39b6236fd3a72c364f52b4f5f5b4dd8cc54b4e/test/taMaxText.spec.js#L34-L44

[cbunhok]

@SimeonC
I tested, and it did not work.

[SimeonC]

I don't know then, if you can write up a plunkr I may be able to help you, but otherwise I'm out of ideas sorry.