Управляющие элементы (input, select, textarea) — это способы ввода данных пользователем. Форма — это набор управляющих элементов, предназначенных для группирования связанных элементов.

Формы и управляющие элементы предоставляют средства проверки, чтобы сообщать пользователю о некорректном вводе. Это улучшает пользовательский опыт, так как пользователь получает мгновенную обратную связь о том, как исправить ошибку. Помните, что хотя проверка на стороне клиента играет важную роль в обеспечении хорошего пользовательского опыта, её легко обойти, и поэтому ей нельзя доверять. Для безопасного приложения всё же необходима проверка на стороне сервера.

Улучшить эту документациюПростая форма

Ключевым директивой для понимания двусторонней привязки данных является ngModel. Директива ngModel обеспечивает двустороннюю привязку данных, синхронизируя модель с представлением, а также представление с моделью. Кроме того, она предоставляет API для других директив, чтобы расширить её поведение.

Обратите внимание, что novalidate используется для отключения собственной проверки формы браузера.

Использование CSS-классов

Для стилизации формы и управляющих элементов ngModel добавляет следующие CSS-классы:

• ng-valid
• ng-invalid
• ng-pristine
• ng-dirty

Следующий пример использует CSS для отображения состояния валидности каждого управляющего элемента формы. В примере и user.name, и user.email являются обязательными, но отображаются с красным фоном только при изменении. Это гарантирует, что пользователь не отвлекается на ошибку до тех пор, пока не взаимодействует с элементом управления и не нарушит его валидность.

Привязка к состоянию формы и элемента управления

Форма — это экземпляр FormController. Экземпляр формы можно выборочно опубликовать в область видимости с помощью атрибута name.

Аналогично, элемент управления вводом, имеющий директиву ngModel, содержит экземпляр NgModelController. Такой экземпляр управления можно опубликовать как свойство экземпляра формы, используя атрибут name на элементе управления вводом. Атрибут name определяет имя свойства в экземпляре формы.

Это означает, что внутреннее состояние как формы, так и элемента управления доступно для привязки в представлении с помощью стандартных примитивов привязки.

Это позволяет нам расширить приведенный выше пример с такими функциями:

• Кнопка СБРОС активна только если в форме есть изменения
• Кнопка СОХРАНИТЬ активна только если в форме есть изменения и она валидна
• Настраиваемые сообщения об ошибках для user.email и user.agree

Настраиваемая валидация

Angular предоставляет базовые реализации для большинства распространённых типов input HTML5: (text, number, url, email, radio, checkbox), а также некоторые директивы для проверки (required, pattern, minlength, maxlength, min, max).

Определение собственной проверки можно осуществить с помощью собственной директивы, которая добавляет пользовательскую функцию проверки в контроллер ngModel контроллер. Для доступа к контроллеру директива указывает зависимость, как показано в примере ниже. Проверка может происходить в двух местах:

• Обновление модели в представлении — всякий раз, когда связанная модель изменяется, все функции в массиве NgModelController#$formatters выполняются поэтапно, так что каждая из этих функций имеет возможность отформатировать значение и изменить состояние валидности элемента управления формой с помощью NgModelController#$setValidity.

• Обновление представления в модели — аналогичным образом, всякий раз, когда пользователь взаимодействует с элементом управления, вызывается NgModelController#$setViewValue. В свою очередь, это выполняет все функции в массиве NgModelController#$parsers поэтапно, так что каждая из этих функций имеет возможность преобразовать значение и изменить состояние валидности элемента управления формой с помощью NgModelController#$setValidity.

В следующем примере мы создаём две директивы.

• Первая — это integer — она проверяет, является ли входной параметр допустимым целым числом. Например, 1.23 является недопустимым значением, так как содержит дробную часть. Обратите внимание, что мы используем unshift вместо push. Это потому, что мы хотим, чтобы это был первый парсер и он потреблял значение строки управления, так как нам нужно выполнить функцию проверки перед преобразованием в число.

• Вторая директива — smart-float. Она анализирует как 1.2, так и 1,2 в допустимое число с плавающей точкой 1.2. Обратите внимание, что мы не можем использовать тип ввода number здесь, так как браузеры HTML5 не позволят пользователю вводить то, что он будет рассматривать как недопустимое число, такое как 1,2.

Реализация пользовательских элементов управления формой с использованием ngModel

Angular реализует все основные HTML-элементы управления формами (input, select, textarea), чего должно хватить для большинства случаев. Однако, если вам нужна большая гибкость, вы можете написать собственный элемент управления формой как директиву.

Чтобы пользовательский элемент управления работал с ngModel и для достижения двусторонней привязки данных, он должен:

• реализовать метод $render, который отвечает за отображение данных после прохождения NgModelController#$formatters,
• вызывать метод $setViewValue, всякий раз, когда пользователь взаимодействует с элементом управления и модель нуждается в обновлении. Обычно это делается внутри обработчика события DOM.

См. $compileProvider.directive для получения дополнительной информации.

Следующий пример демонстрирует, как добавить двустороннюю привязку данных к элементам contentEditable.