Forms

Формулярите в AngularJS осигуряват свързването на данни и валидирането на контролите за въвеждане на данни. Входни контроли Входните контроли са елементите на HTML входа:

  • input elements
  • select elements
  • button elements
  • textarea elements

Свързване на данните

Контролите за въвеждане осигуряват свързването на данни, като използват директивата ng-model.

Приложението вече има свойството firstname. Директивата ng-model свързва елемента за входни данни към останалата част от приложението ви. Свойството firstname може да се използва в контролер:

Опитайте сами »

Може да се посочи и другаде в заявлението:

Опитайте сами »

Checkbox

В квадратчето за отметка има стойността true или false. Прилагайте директивата за ng-model в квадратче за отметка и използвайте стойността му в приложението си.

Опитайте сами »

Радио бутони

Свържете радио бутоните на приложението си с директивата ng-model. Радио-бутоните със същия ng-model могат да имат различни стойности, но само избраният ще бъде използван.

Опитайте сами »

Стойността на myVar ще бъде една от трите dogs, tuts, или cars.

Selectbox

Свържете селектираните кутии към приложението си с директивата ng-model. Дефинираното в атрибута ng-model свойство ще има стойността на избраната опция в полето за избор.

Опитайте сами »

Стойността на myVar ще бъде една от трите dogs, tuts, или cars.

Валидиране на HTML формуляри

AngularJS може да валидира входните данни. AngularJS предлага потвърждаване на формата от страна на клиента. AngularJS следи състоянието на формулярите и полетата за въвеждане (input, textarea, select) и ви позволява да уведомите потребителя за текущото състояние. AngularJS също има информация за това дали са били докоснати или променени или не. Можете да използвате стандартни атрибути на HTML5, за да валидирате вход, или можете да направите свои собствени функции за валидиране. Валидирането от страна на клиента не може да осигури самото въвеждане на потребителя. Удостоверяването от страна на сървъра също е необходимо.

Required

Използвайте HTML5 атрибута required за да укажете, че полето за въвеждане трябва да бъде попълнено:

Опитайте сами »

E-mail

Използвайте HTML5 атрибута email за да укажете, че полето за въвеждане трябва да бъде email:

Опитайте сами »

Form State и Input State

AngularJS непрекъснато актуализира състоянието на формуляра и полетата за въвеждане. Полетата за въвеждане имат следните състояния:

  • $untouched Полето все още не е докоснато
  • $touched Полето е докоснато
  • $pristine Полето все още не е променено
  • $dirty Полето е променено
  • $invalid Съдържанието на полето не е валидно
  • $valid Съдържанието на полето е валидно

Това са всички свойства на входното поле и са или true или false. Формите имат следните състояния:

  • $pristine Още няма промяна на полетата
  • $dirty Едно или повече са били променени
  • $invalid Съдържанието на формуляра не е валидно
  • $valid Съдържанието на формуляра е валидно
  • $submitted Формулярът е изпратен

Това са всички свойства на формубярите и са или true или false. Можете да използвате тези състояния, за да покажете на потребителя полезни съобщения. Пример, ако се изисква поле и потребителят го остави непопълнено, трябва да дадете на потребителя предупреждение:

Опитайте сами »

CSS Класове

AngularJS добавя класове на CSS във формуляри и входни полета в зависимост от състоянието им. Следните класове се добавят или премахват от полетата за въвеждане:

  • ng-untouched Полето все още не е докосвано
  • ng-touched Полето е докоснато
  • ng-pristine Полето все още не е променено
  • ng-dirty Полето е променено
  • ng-valid Съдържанието на полето е валидно
  • ng-invalid Съдържанието на полето не е валидно
  • ng-valid-key Един ключ за всяко валидиране. Пример: ng-valid-required е полезно, когато има повече от едно нещо, което трябва да бъде потвърдено
  • ng-invalid-key Пример: ng-invalid-required

Следните класове се добавят към формуляри или се премахват от тях:

  • ng-pristine Все още няма промяна на полетата
  • ng-dirty Едно или повече полета са променени
  • ng-valid Съдържанието на формуляра е валидно
  • ng-invalid Съдържанието на формуляра не е валидно
  • ng-valid-key Един ключ за всяко валидиране. Пример: ng-valid-required, полезно, когато има повече от едно нещо, което трябва да бъде потвърдено
  • ng-invalid-key Пример: ng-invalid-required

Класовете се премахват, ако стойността, която представляват, е невярна. Добавете стилове за тези класове, за да придадете на приложението си по-добър и по-интуитивен потребителски интерфейс.

Опитайте сами »

Формулярите също могат и да се стилизират.

Опитайте сами »

Наши собствени валидации

Създаването на собствена функция за валидиране е малко по-трудно; Трябва да добавите нова директива към заявката си и да се занимавате с валидирането във функция с определени конкретни аргументи.

Опитайте сами »

Пример обяснен: В HTML, новата директива ще се използва с помощта на атрибута my-directive. В JavaScript скрипта ни започваме с добавянето на нова директива, наречена myDirective. Не забравяйте, че когато посочвате директива, трябва да използвате camel case за именуване, myDirective, но когато я извиквате, трябва да използвате разделено име my-directive. След това върнете обект, в който посочвате, че се нуждаем от ngModel, който е ngModelController. Направете свързваща функция, която отнема някои аргументи, където четвъртият аргумент, mCtrl, е ngModelController, След това задайте функция, в този случай наречена myValidation, която приема един аргумент, този аргумент е стойността на входния елемент. Тествайте, ако стойността съдържа буквата „e“ и задайте валидността на модела на контролера или на true или false. Най-накрая mCtrl.$parsers.push(myValidation); ще добави функцията myValidation към масив от други функции, които ще се изпълняват всеки път, когато се вмества стойността на въвеждане.

Опитайте сами »

Атрибутът novalidate се използва за деактивиране на валидирането на браузъра по подразбиране.

Пример обяснен Директивата AngularJS ng-model свързва входните елементи към модела. Моделният обект има две свойства: user и email. Заради ng-show, елементите с цвят червено се показват само когато потребителят или имейлът са $dirty и $invalid.