Теперь, когда мы узнали о поддержке валидации формы
на основе шаблонов в Angular в предыдущей лекции,
давайте применим то, что мы узнали, к
форму входа, которую мы разработали в предыдущем упражнении.
Мы сделаем простую проверку формы для входа в систему.
В частности, мы будем указывать имя пользователя и пароль по мере необходимости,
, а затем проверить, чтобы пользователь вводил информацию в эти поля,
и иметь возможность отображать сообщения об ошибках, когда поля пустые.
Давайте продолжим эту модификацию приложения в этом упражнении.
Чтобы начать это упражнение,
давайте перейдем к форме входа здесь,
, что у нас есть в шаблоне компонентов входа здесь.
Мы уже добавили атрибут novalidate в форму входа.
Итак, давайте добавим в шаблон переменную loginForm к этому шаблону
, а затем установим это в ngForm, как мы поняли из предыдущей лекции здесь.
Таким образом, делая это,
мы указываем, что эта переменная шаблона позволяет нам отслеживать состояние формы.
Таким образом, мы можем даже проверить действительное или недопустимое состояние для этой формы.
Теперь, кроме того, для каждого из этих входов
мы также будем аналогичным образом добавлять в соответствующие переменные шаблона здесь.
Итак, позвольте мне перейти к следующей строке здесь,
и там я скажу имя пользователя ngModel.
Затем мы также уточним это, как это требуется здесь.
Аналогично, для пароля
мы добавим в соответствующую переменную шаблона здесь, как пароль находится в ngModel,
, а затем укажите это, как это требуется здесь.
Итак, теперь, когда мы указали переменные шаблона,
мы можем провести некоторые проверки формы здесь.
Теперь, поскольку мы указываем это по мере необходимости,
это означает, что если эти поля,
поля ввода пусты,
то требуемая ошибка будет помечена для этого.
Аналогично, теперь, когда у нас есть переменная шаблона для формы,
мы можем легко использовать это, чтобы проверить и отключить кнопку Submit ниже.
Итак, для кнопки Отправить,
то, что мы здесь делаем, это использовать
отключенное поле здесь,
, а затем мы установим отключенное поле
в loginForm.form.invalid.
Таким образом, делая это,
мы будем отключать эту кнопку, когда форма недействительна.
Таким образом, пользователь не может даже отправить форму, если форма содержит недопустимую запись.
Так, например, если имя пользователя пусто или пароль пуст,
, то форма входа будет недействительной,
и поэтому пользователь не может отправить эту форму.
Теперь это одна часть проверки формы, которую мы можем сделать,
, посредством которой мы можем предотвратить подавление формы.
Кроме того, для каждого из этих полей
мы даже можем отобразить сообщение об ошибке
указать, какая ошибка происходит в этом конкретном поле.
Итак, чтобы сделать это,
к каждому из этих элементов поля формы,
мы добавим в тег mat-error там,
, а затем мы скажем stop ngIf,
и скажем username.errors.
Итак, обратите внимание, что мы уже дали этому шаблону переменную с именем username,
, чтобы мы могли использовать в username.errors, если есть ошибки, и
, если этот тип ошибки требуется.
Итак, если ошибка является обязательным типом ошибки, которая вызывает там,
то в этот момент
мы можем указать, что соответствующая ошибка будет отображаться имя пользователя требуется.
Итак, это ошибка, которая будет отображаться для этого поля здесь.
Аналогичным образом, позвольте мне добавить то же самое для поля пароля здесь.
Итак, позвольте мне скопировать это, а затем вставить его здесь,
, а затем мы скажем password.errors.
Тогда сообщение будет пароль требуется.
Таким образом, добавив это,
мы будем отображать сообщения об ошибках ниже
эти поля, когда поле не содержит никакой информации.
Незначительное исправление здесь.
Это должно быть имя пользователя?errors.readable здесь,
и аналогичным образом, этот также должен быть.readable здесь.
Таким образом, с этими изменениями
мой компонент входа теперь готов
для проверки формы, а затем отображения сообщений об ошибках.
Итак, давайте сохраним изменения, а затем пойдем и посмотрим на обновленное приложение.
Перейдя в наше приложение в браузере,
откроем здесь форму входа.
Итак, вы можете видеть, что теперь как имя пользователя, так и пароль несут
звезду там, чтобы указать, что они оба обязательны.
Итак, позвольте мне ввести.
Итак, здесь вы видите, что форма действительна, потому что она содержит информацию,
и поэтому кнопка Login будет включена.
Позвольте мне удалить информацию из поля пароля
, а затем вы сразу заметите, что
здесь указана ошибка, указывающая, что пароль требуется.
Также обратите внимание, что кнопка Login больше не будет включена.
Он будет отключен. Таким образом, вы не сможете отправить форму здесь.
Но в тот момент, когда я введу что-то в пароль,
, тогда кнопка Login будет включена,
и мы сможем отправить форму здесь.
Аналогично для имени пользователя.
Если я удалю информацию об имени пользователя там,
, то вы увидите ошибку, отображаемую здесь,
, а также вы увидите, что кнопка входа в данный момент не включена.
Итак, вот как в этом случае может быть проведена проверка формы.
Итак, как вы видели,
, добавив в простой форме валидацию в наше приложение,
мы можем проверить, чтобы убедиться, что
поля содержат информацию, которую они должны содержать,
и в правильном формате.
Мы рассмотрим немного больше проверки формы в одном из последующих упражнений,
особенно для реактивных форм.
С этим мы завершаем это упражнение.
Это хорошее время для вас, чтобы сделать git commit
с помощью форм, управляемых шаблонами сообщений, часть вторая.