I've got the following div, which I want to add the bootstrap's class "has-error" if the input length is over 50 characters. This is the HTML:

<div class="form-group" ng-class="{has-error:[formData.titulo.$error]}">

    <label for="inputTitulo">Título</label>
    <input type="titulo" class="form-control" id="inputTitulo" 
           maxlength="50" ng-maxlength="50" ng-model="formData.titulo">

</div>

How can I make this work? I guess when you reach 50 characters, ng-maxlength throws a error, like the $error object, but I have no clue on what object is, how to access it, and if I have to do some more work in the controller or directive.

Any help here? I can't find any "easy" info regarding this issue and Angular validators.

edit 1:

I've seen all your responses, learned something new thanks to you, but this is still somehow not working. It currently is this way:

  <div class="form-group" ng-class="{'has-error': formData.titulo.$error.maxlength}">
    <label for="inputTitulo">Título</label>
    <input type="titulo" class="form-control"  id="inputTitulo" maxlength="50" ng-maxlength="50" ng-model="formData.titulo">
  </div>

Also tested checking the length directly, as one of you suggested. But none of these solutions seem to work: it never adds the has-error class. Why?

I've got the following div, which I want to add the bootstrap's class "has-error" if the input length is over 50 characters. This is the HTML:

<div class="form-group" ng-class="{has-error:[formData.titulo.$error]}">

    <label for="inputTitulo">Título</label>
    <input type="titulo" class="form-control" id="inputTitulo" 
           maxlength="50" ng-maxlength="50" ng-model="formData.titulo">

</div>

How can I make this work? I guess when you reach 50 characters, ng-maxlength throws a error, like the $error object, but I have no clue on what object is, how to access it, and if I have to do some more work in the controller or directive.

Any help here? I can't find any "easy" info regarding this issue and Angular validators.

edit 1:

I've seen all your responses, learned something new thanks to you, but this is still somehow not working. It currently is this way:

  <div class="form-group" ng-class="{'has-error': formData.titulo.$error.maxlength}">
    <label for="inputTitulo">Título</label>
    <input type="titulo" class="form-control"  id="inputTitulo" maxlength="50" ng-maxlength="50" ng-model="formData.titulo">
  </div>

Also tested checking the length directly, as one of you suggested. But none of these solutions seem to work: it never adds the has-error class. Why?

• javascript
• angularjs
• forms
• validation
• angularjs-forms

Share Improve this question Follow edited Aug 7, 2015 at 17:50 Pankaj Parkar 136k2323 gold badges240240 silver badges303303 bronze badges asked Aug 7, 2015 at 17:24 ZerokZerok 1,51322 gold badges2929 silver badges6060 bronze badges 2

• 1 IF you want only validate with maxlength then you could use ng-class="{has-error: formData.titulo.$error.maxlength}" – Pankaj Parkar Commented Aug 7, 2015 at 17:35
• As I explained below, the input's ngModelController is published under the name of the directive. You need to add name="titulo" to your input for your attempt to work – New Dev Commented Aug 7, 2015 at 17:50

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

To have the errors published on the scope, a form directive is required.

<div ng-form="form1" ng-class="{'has-error': form1.text1.$error.maxlength}">
  <input name="text1" ng-model="formData.foo" ng-maxlength="50">
</div>

(Notice that the above uses the name attribute of the input to publish the form data - really, the ngModelController - on the scope)

So, the above works, and it's preferable if you do form validation. But, if you just need to check the length of some input, you don't have to use form validation - you could just check the model directly:

<div ng-class="{'has-error': formData.foo.length > 50}>
  <input ng-model="formData.foo">
</div>

as you are using ng-model to make validations ,, this class ng-invalid will be added to your input docs : https://docs.angularjs/api/ng/directive/ngModel

to use $error you need to access it using forms and names not ng-model ,, and the ng-class should be bound to the $error.maxlength not $error only

tutorial : https://scotch.io/tutorials/angularjs-form-validation

If you use the maxlength, a user will never be able to enter more characters than that, so you will never get the ng-maxlength error. It doesn't make sense to use maxlength and ngMaxlength together IMHO.

See the example on docs.angularjs/api/ng/directive/ngMaxlength (open the example in plunker and add maxlength attribute)