как отразить состояние проверки на пользовательском элементе?

Я создал собственный угловой компонент для выбора нескольких элементов из коллекции. Этот пользовательский элемент имеет массив как ngModel. Я хотел бы, чтобы он отражал состояние проверки, то есть: ng-invalid ng-invalid-required.

если я добавлю в tpl пользовательского элемента поле ввода с этим ngModel, состояние проверки будет обновлено правильно. Но если он находится в обертке этого пользовательского элемента, он не работает:

<input type="text" ng-model="$ctrl.selected" name="selected" required /><!--WORKS-->
<div
    class="pseudoField"
    ng-model="$ctrl.selected"
    required
    name="test"
><!--NOT WORKING-->

Если форма, содержащая этот настраиваемый элемент, отправляется, состояние проверки корректно отражается на входных данных. Он получает классы CSS: «ng-invalid ng-invalid-required». Но то же самое не произошло с div.

Как это сделать в div?

РЕДАКТИРОВАТЬ: Чтобы дать некоторый контекст, компонент представляет собой раскрывающийся список автозаполнения, который позволяет выбрать несколько элементов из списка, представленного в раскрывающемся списке. После выбора элемент попадает в список выбранных элементов, представленных в виде «тегов». Это похоже на пример select2 «Поддержка тегов»: https://select2.github.io/examples.html

Для этого я обернул ввод в контейнер div ".pseudoField". При щелчке контейнера div он передает фокус этому элементу ввода. У входных данных удалены стили границ, поэтому они «невидимы». Когда ввод сфокусирован, стиль div.pseudoField изменяется, чтобы он выглядел так, как будто он сфокусирован. Таким образом, для пользователя div.pseudoField действует как элемент формы, и я хотел бы, чтобы он также имел состояние проверки. Надеюсь, это имеет смысл.


angularjs angular-validation angular-ngmodel
person Olivvv    schedule 27.03.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы не можете использовать ng-model на <div>. Из ng-model документов:

Директива ngModel привязывает input, select, textarea (или настраиваемый элемент управления формы) к свойству в области с помощью NgModelController, который создается и предоставляется этой директивой.

person Mistalis    schedule 27.03.2017
comment
Тогда можно ли было бы поместить ngmodel в поле ввода display: none и скопировать его состояние проверки? - person Olivvv; 27.03.2017
comment
@Olivvv Это кажется немного смешным, я не понимаю, почему ты хочешь это сделать. Чего вы пытаетесь достичь? - person Mistalis; 27.03.2017
comment
Я отредактировал вопрос, объяснив, чего я пытаюсь достичь. - person Olivvv; 27.03.2017
comment
Кстати, я думаю, что пользовательское управление формой означает, что оно должно работать и для div. Это очевидный способ сделать контент редактируемым: docs. angularjs.org/api/ng/type/ - person Olivvv; 27.03.2017