[MUSIC]
Теперь, когда мы имели краткое введение в проверку реактивной формы в
предыдущей лекции, давайте перейдем к следующему упражнению, где мы могли бы
применить проверку формы к реактивной форме, которую мы создали в предыдущем упражнении.
Итак, отправляясь в наш контактный компонент машинописного файла,
давайте добавим в валидаторы формы к каждому из этих свойств в нашей модели формы.
Так что для первого имени я бы сказал в массиве, Validators.
Обязательно, Точно так же я буду
применить то же самое к, lastname.
Тогда по электронной почте, а также для telnum, так что для
telnum я бы сказал для оставшихся трех я могу оставить их открытыми,
потому что я согласен с либо ложным или истинным и дать им другие значения.
Поскольку это небольшой переключатель и contacttype может принимать только один
из трех значений и значение Default уже дано там,
и для сообщения, мы можем сделать его не обязательным значением.
Если пользователь не хочет вводить комментарии,
вы можете позволить им не вводить комментарии, но если вы хотите,
вы можете добавить Validators.readecired даже для сообщения.
Кроме того, при сбросе формы в методе onSubmit здесь
вы также можете сбросить форму на ее начальное значение, как мы указали
в методе, где мы создали форму.
Таким образом, в пределах значения сброса он принимает объект в качестве параметра здесь.
Этот объект будет использоваться методом сброса, сделав
использовать метод заданного значения, который мы видели в лекции ранее, чтобы сбросить
форму в условие, как это было при его первоначальном создании.
Итак, здесь мы можем предоставить
параметры, такие как firstname: ',
lastname:' ', telnum: 0,
Затем email:' ',
согласиться: false,
contactttype:' None ',
сообщение:'});.
Таким образом, эти значения, которые мы предоставили в этом объекте
JavaScript, который мы даем нам параметр для метода сброса
будет иметь точно такие же значения, как мы видели для
эти свойства, когда мы создали эту форму обратной связи.
Нам также нужно полностью сбросить форму в шаблоне.
Итак, чтобы сделать это, чтобы вернуться к импорту здесь, и
, тогда мы также импортируем ViewChild} из '@angular /core';.
Это позволит нам получить доступ к
любому из элементов child dom в моем шаблоне.
Поэтому после этого, войдя в код
здесь, в ContactComponent, я могу сказать @ViewChild,
, а затем я смогу обратиться к feedbackForm,
давая ему переменную шаблона с именем fform.
Вы собираетесь сделать это на следующем шаге, а затем для этого
я буду ссылаться на это, используя feedbackFormDirective.
Таким образом, это позволяет нам получить доступ к шаблонной форме, а затем полностью сбросить
, так что сама форма возвращается к своему первозданному значению.
Таким образом, это еще один дополнительный шаг, который нам нужно сделать, чтобы форма была
полностью сброшена до своего начального значения здесь.
Теперь, сделав это в методе onSubject, после сброса самого объекта feedbackForm
здесь, нам также нужно добавить
в этом.feedbackFormDirective.resetForm ();
Там.
Таким образом, это гарантирует, что мой feedbackForm полностью сбрасывается до его первозданного значения
на данный момент.
Итак, после этих изменений давайте теперь перейти к нашему шаблону
файл, чтобы показать, как мы можем отразить эти ошибки
в нашем шаблоне для нашей формы там.
Итак, переключившись на файл шаблона.
Так что сначала мы перейдем к кнопке здесь, а
потом сделаем кнопку Отключена.
Если «feedbackForm недействителен».
Таким образом, кнопка будет включена только тогда, когда feedbackForm действительна.
Переходя к этой форме, позвольте мне добавить в
<mat-errox*ngIF="feedbackForm.get» получить
('firstname') .hasError ('required')
&&
feedbackForm.get ('firstname')
.toud», и сообщение является обязательным.
Так что это будет сообщение, которое вы назначаете, используя одну строку со скрытым,
с этой информацией там.
Позвольте мне применить то же самое к имени,
телефонному номеру и электронной почте.
Так что я просто собираюсь скопировать, и вставить, и отредактировать их,
, чтобы вы могли продолжить с ними, и ('lastname').
Фамилия.
Тельнум.
Поэтому я применяю это к ('telnum').
Опять же, та же идея за этим, а затем также по электронной почте.
('email').
Добавим в форму переменную шаблона fform.
Поэтому я набираю #fform ="ngForm».
Перейдя к нашей форме в браузере, позвольте мне ввести имя
, и вы видите, что даже если я удалю значение будет по-прежнему оставаться зеленым,
, потому что мы использовали тронутый там.
Но в тот момент, когда я отойду от него, вы
сможете увидеть, что это становится красным цветом.
Так же для фамилии вы увидите, что когда я
удалю значение Фамилия, то это показано там аналогичным образом.
Позвольте мне ввести имя и фамилию, а также для электронной почты.
В, Тот же случай для телефонного номера также.
Таким образом, вы можете сделать проверку формы в нашем приложении.
С этим мы завершаем это упражнение, где мы добавили
в нашу реактивную форму проверки формы.
Это хорошее время для вас, чтобы сделать git commit с сообщением,
reactive образует часть вторую.
[МУЗЫКА]