Угловые валидаторы и использование ng-maxlength

У меня есть следующий div, в который я хочу добавить класс начальной загрузки «has-error», если длина ввода превышает 50 символов. Это 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>

Как я могу заставить это работать? Я предполагаю, что когда вы достигаете 50 символов, ng-maxlength выдает ошибку, например, объект $error, но я понятия не имею, что это за объект, как получить к нему доступ, и если мне нужно выполнить дополнительную работу в контроллере или директиве .

Любая помощь здесь? Я не могу найти никакой «простой» информации об этой проблеме и валидаторах Angular.

редактировать 1:

Просмотрел все ваши ответы, узнал кое-что новое благодаря вам, но это все равно как-то не работает. В настоящее время это так:

  <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>

Также протестирована проверка длины напрямую, как предложил один из вас. Но ни одно из этих решений не работает: оно никогда не добавляет класс has-error. Почему?


javascript validation forms angularjs angularjs-forms
person Zerok    schedule 07.08.2015    source источник
comment
ЕСЛИ вы хотите проверить только с максимальной длиной, вы можете использовать ng-class="{has-error: formData.titulo.$error.maxlength}"   -  person Pankaj Parkar    schedule 07.08.2015
comment
Как я объяснил ниже, ввод ngModelController публикуется под name директивы. Вам нужно добавить name="titulo" к вашему вводу, чтобы ваша попытка работала   -  person New Dev    schedule 07.08.2015

Ответы (3)


arrow_upward
3
arrow_downward

Чтобы ошибки были опубликованы в области действия, требуется директива form.

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

(Обратите внимание, что в приведенном выше примере используется атрибут ввода name для публикации данных формы — на самом деле, ngModelController — в области видимости)

Итак, вышеизложенное работает, и желательно, если вы выполняете проверку формы. Но если вам просто нужно проверить длину некоторого ввода, вам не нужно использовать проверку формы — вы можете просто проверить модель напрямую:

<div ng-class="{'has-error': formData.foo.length > 50}>
  <input ng-model="formData.foo">
</div>
person New Dev    schedule 07.08.2015
comment
Да, это было бы более явно, спасибо... (я не использовал его, так как ng-maxlength была единственной применяемой директивой проверки) - person New Dev; 07.08.2015
comment
Теперь это выглядит идеально.. +1 - person Pankaj Parkar; 07.08.2015

arrow_upward
0
arrow_downward

поскольку вы используете ng-model для проверки, этот класс ng-invalid будет добавлен к вашим входным документам: https://docs.angularjs.org/api/ng/directive/ngModel

чтобы использовать $error, вам нужно получить к нему доступ, используя формы и имена, а не ng-model, и ng-класс должен быть привязан к $error.maxlength, а не только к $error

учебник: https://scotch.io/tutorials/angularjs-form-validation

person Ahmed Eid    schedule 07.08.2015

arrow_upward
0
arrow_downward

Если вы используете maxlength, пользователь никогда не сможет ввести больше символов, чем это, поэтому вы никогда не получите ошибку ng-maxlength. IMHO не имеет смысла использовать maxlength и ngMaxlength вместе.

См. пример на docs.angularjs.org/api/ng/directive/ngMaxlength (откройте пример в plunker и добавьте атрибут maxlength)

person Michiel    schedule 06.09.2017