Мы только что завершили изучение угловых форм, управляемых шаблонами, а также,
в упражнении, построили нашу первую форму, управляемую шаблоном.
Теперь, когда пользователь вводит информацию в поля формы,
мы можем проверить данные, которые пользователь вводит в эти поля данных.
В первые дни работы в Интернете
единственным способом проверки данных было отправить данные
на сервер, а затем выполнить проверки на стороне сервера,
, а затем получить результат со стороны сервера.
Но в наши дни, с мощными клиентскими фреймворками, такими как Angular,
большая часть проверки данных может быть легко выполнена на стороне клиента
, и мы можем легко поймать много ошибок на стороне клиента,
, а затем даже предоставить указание пользователю об ошибках.
Теперь, здесь мы рассмотрим угловую поддержку для проверки формы
, а затем, как мы можем проводить проверку формы,
, а затем показывать сообщения об ошибках пользователю в представлениях.
HTML5 уже поставляется с встроенной поддержкой проверки формы.
Но когда мы используем Angular для нашего приложения,
мы должны сначала отключить проверку формы HTML5,
, чтобы ответственность за выполнение проверки формы
перешла на угловое приложение.
Итак, чтобы сделать это для формы,
, как мы видели в упражнении ранее,
мы включаем атрибут novalidate к тегу формы там,
так, что это гарантирует, что угловой
берет на себя ответственность за выполнение проверки формы.
Как Angular помогает нам выполнить проверку формы?
Это то, что мы рассмотрим подробнее дальше.
Всякий раз, когда вам нужно выполнить проверку формы в Angular,
, особенно когда вам нужно ссылаться на поля формы в вашем шаблоне,
вам нужна помощь ссылочных переменных углового шаблона.
Как указать ссылочную переменную шаблона?
Балочная переменная шаблона может быть указана для
любого элемента, связывая переменную шаблона подобным образом.
Например, в данном случае для формы
мы указываем форму входа, равную ngForm.
Аналогично, для поля ввода, например,
вы бы сказали косой чертой,
или скорее #username равно ngModel.
В этом случае форма входа и имя пользователя являются ссылочными переменными шаблона.
Эти эталонные переменные могут быть использованы в
наш Угловой шаблон для ссылки на эти поля.
Итак, в самом шаблоне
вы можете проверить состояния управления для
те поля, включая такие вещи, как допустимое поле,
является ли оно грязным,
или имеет некоторые ошибки.
Мы будем использовать эту поддержку, которую предоставляет Angular, чтобы сделать проверку формы.
Как я уже упоминал, мы будем использовать
эталонные переменные шаблона для сбора состояния управления для проверки информации.
Так, например, вы можете сказать username.pristine в своем шаблоне.
Итак, это относится к проверке состояния,
, находится ли конкретный элемент управления в первозданном состоянии,
означает, что он не был тронут и изменен пользователем до сих пор.
Грязные противоположны первозданной,
, что означает, что когда поле грязное,
то это означает, что поле было изменено пользователем в прошлом.
Аналогично, допустимое и недопустимое состояние управления
позволяет нам проверить, является ли информация в этом поле действительной или недействительной,
в зависимости от спецификации проверки
для действительности или недопустимого состояния данного конкретного поля.
Так, например, вы можете проверить, объявлены ли поля по мере необходимости,
, что означает, что пользователь
вводит хотя бы некоторую информацию в поле.
Отсутствие информации в поле в вашей форме означает, что поле является недействительным.
Аналогичным образом, вы можете указать материковую часть или максимальную длину значения поля
, чтобы вы могли легко проверить, является ли количество символов
в поле относительно основной длины,
или ниже максимальной длины и так далее.
В следующем упражнении
мы применим эти различные подходы к проверке формы для
нашей формы, управляемой шаблоном, которая была разработана в предыдущем упражнении.
Например, в вашей форме
вы можете отключить кнопку отправки, проверив на
посмотреть, находится ли эта форма в действительном состоянии или нет.
Таким образом, в этом случае вы свяжете отключенный
и установите его равным login form.form.invalid,
означает, что когда форма недействительна,
эта кнопка будет отключена в этом случае.
Таким образом, пользователю не будет разрешено передавать информацию через эту конкретную форму.
Итак, это один из способов обеспечения того, чтобы
неверные записи не будут отправлены пользователем через форму.
Аналогично, для определенных полей
вы можете проверить, заполнено ли поле или нет.
Итак, если вы укажете, что конкретное поле является обязательным
, указав необходимый атрибут для поля ввода,
, то вы можете проверить, есть ли ошибка
требуемого типа, поднятого для конкретного элемента поля.
Итак, в вашем коде, например,
вы даже можете указать, чтобы информировать пользователя о
о том, что конкретное поле неверно.
Вы используете mat-error, чтобы обозначить это.
Итак, тег mat-error, который приходит из,
снова, поддержка углового материала формы, как вы видите здесь,
если ngIf оказывается истинным,
то это сообщение будет отображаться ниже в поле ввода там,
и аналогично поле ввода,
будет помечен красным на экране.
Итак, это то, что вы собираетесь проверять и
, обеспечивая, а также доставляя сообщения об ошибках пользователю.
В следующем упражнении
мы применим этот подход для проверки имени пользователя и пароля.
Укажем, что эти поля являются обязательными, и если пользователь
не вводит никакой информации в эти поля после того, как поле было затронуто,
, то мы гарантируем, что соответствующее сообщение об ошибке отображается пользователю.
Итак, с этим быстрым пониманием проверки формы в Angular,
давайте перейдем к упражнению,
, где мы проверим, как мы можем сделать простую проверку формы для
нашу форму входа, а затем иметь возможность отображать сообщения об ошибках.
Мы снова вернемся для проверки формы в одном из последующих упражнений
после того, как мы узнали больше о реактивной поддержке в Angular.