Мы рассмотрели реактивные формы в одном из предыдущих уроков,
, где мы сделали два упражнения, касающиеся реактивных форм,
, как мы их создаем,
, а затем сделали некоторые основные проверки формы на реактивных формах.
Мы продолжим тему в этом уроке
, потому что реактивные формы, как следует из названия,
имеет какое-то отношение к реактивному программированию, как вы могли ожидать.
Теперь реактивные формы также позволяют наблюдать изменения в значениях элементов формы,
с помощью наблюдаемого, что Angular делает доступным называется valueChanges.
Мы будем использовать valueChanges, наблюдаемые в этом упражнении,
для того, чтобы отслеживать изменения значений
их различных элементов формы, а затем немедленно запустить проверку формы.
В этом упражнении мы будем делать большую часть проверки формы в коде
, а не в самом шаблоне,
, как мы сделали с проверкой формы реактора во втором упражнении реактивных форм.
Перейдя к контакту.component.tsfile,
мы собираемся обновить реактивную форму, которую мы создали здесь,
, добавив еще несколько валидаторов для некоторых из этих полей.
Итак, здесь вы видите, что для первой фамилии и
номер телефона и email мы добавили необходимые валидаторы.
Для имени и фамилии
Я собираюсь добавить еще пару валидаторов для
минимальную длину и максимальную длину.
Теперь, если у вас есть более одного валидатора в вашей реактивной форме,
вы должны объявить их, используя там массив.
Таким образом, это должно быть заключено внутри массива здесь.
Итак, вы видите, что я вложил требуемый Validator внутри массива.
Я собираюсь добавить в Validators, minLength Validator.
Итак, для минимальной длины я укажу два как минимальную длину,
, поэтому первое имя должно содержать как минимум два символа.
Также максимальная длина, которую я добавлю
как 25 символов.
Итак, здесь вы видите, что теперь для первого имени у нас есть три разных валидаций,
все заключены в массив здесь.
Требуются валидаторы, Validators minLength,
и Validators maxLength здесь, 25.
Итак, я собираюсь сделать то же самое и для моей фамилии.
Итак, позвольте мне скопировать весь этот луч Validators здесь,
, а затем заменить этот набор Validators.
Теперь кроме того, для телефонного номера
, как вы помните в более ранней версии формы,
номер телефона был готов принимать даже алфавиты,
, но это не правильно.
Телефонные номера обычно являются номерами.
Итак, вот где мы будем использовать другой Validator
, называемый шаблоном Validators.
Таким образом, шаблон Validator позволяет нам указать шаблон для
значений, введенных в этот конкретный элемент формы,
, а затем проверить, чтобы убедиться, что значение соответствует шаблону, указанному.
Итак, здесь шаблон, который мы будем использовать, заключается в том, что значение
должно содержать только числа от нуля до девяти.
Для добавления шаблона
нам нужно сделать это в файле шаблона, как мы увидим за короткое время.
Аналогично, для электронной почты
У меня также будет другой валидатор, называемый в качестве валидатора электронной почты.
Итак, мы добавим в электронную почту Validators.
Это также означает, что нам нужно добавить атрибут
под названием email на вход в наш файл шаблона.
Теперь с этими изменениями моя проверка формы стала более надежной в этом упражнении.
Теперь, когда форма испытывает изменения в любом из ее элементов формы,
, то угловая структура предоставляет наблюдаемый называется valueChanges наблюдаемый.
Итак, я собираюсь использовать valueChanges, наблюдаемые в моей форме обратной связи.
Итак, значениеИзменения наблюдаемы.
Таким образом, valueChanges теперь можно подписаться в рамках этого конкретного метода.
Поэтому, когда мы создаем саму форму,
мы будем подписываться на valueChanges наблюдаемые здесь.
Теперь, когда valueChanges,
поэтому, подписавшись на этот наблюдаемый,
в рамках подписки я буду указывать, что должно быть сделано, когда valueChanges.
Итак, когда valueChanges я бы получил некоторые данные здесь,
от фермы, чтобы указать
, какой конкретный элемент формы испытал изменение значения.
Затем, когда это произойдет,
я собираюсь запустить локальный метод, который я реализую под названием onValueChanged,
, а затем предоставить эти данные в качестве параметра для этого метода.
Теперь, внутри этого метода onValueChanged,
я собираюсь инициировать проверку формы,
, а затем соответствующим образом определить сообщения об ошибках формы на основе того, что
этот объект данных, который я получаю здесь, укажет мне.
Кроме того, когда я впервые создаю форму,
Я вызову метод onValueChanged без какого-либо параметра
, и это будет использоваться для
сброса сообщений проверки формы.
Теперь, как создать сообщения проверки формы?
Чтобы сделать это, я собираюсь полностью определить свои сообщения проверки формы в коде здесь.
Затем через код
я адаптирую сообщения проверки формы,
, и это будет затем использоваться для отображения сообщений об ошибках в моем шаблоне формы.
Итак, чтобы сделать это, то, что я собираюсь сделать, это добавить несколько объектов JavaScript здесь.
Один из объектов JavaScript, который я собираюсь добавить, называется ошибками формы.
Итак, это простой объект JavaScript, который
будет содержать все ошибки для конкретной формы здесь.
Таким образом, в форме ошибок,
я буду использовать четыре разных поля,
имя, фамилия.
Итак, как вы помните,
они соответствуют четырем элементам формы, на которых я делаю проверку формы,
номер телефона и адрес электронной почты.
Теперь, почему я определяю этот объект JavaScript здесь?
Теперь этот объект JavaScript, как вы видите, содержит четыре элемента здесь.
Теперь, когда я выполняю проверку формы,
напоминаю, что я уже указал, что
я собираюсь создать новый метод onValueChange.
Внутри onValueChange способ написания кода заключается в том, что
, если какая-либо ошибка обнаружена,
строка, содержащая сообщение, соответствующее
, что ошибка будет добавлена в этот объект JavaScript.
Итак, таким образом в моем коде,
я могу выполнить проверку формы.
Теперь, в дополнение к этому,
я теперь определим несколько сообщений проверки.
Теперь, этот конкретный шаблон делать вещи,
я узнал, прочитав документацию по проверке формы на веб-сайте angular.io.
Итак, у них есть целая документация о том, как сделать проверку формы и ссылка на которую
доступна в дополнительных ресурсах
этой главы, а также в предыдущих главах по угловым формам.
Итак, там в этом конкретном документе они
прописывают это как способ выполнения проверки формы, и я обнаружил, что это очень интуитивно.
Итак, я также принял тот же шаблон для проверки формы в коде.
Итак, наряду с здесь,
я собираюсь определить сообщения проверки для всех возможных полей здесь.
Итак, для первого поля имени
я определяю несколько сообщений проверки здесь, поэтому я бы сказал,
«требуется», а затем сказать,
«имя требуется», как это,
я добавлю несколько сообщений проверки
здесь и сказать,
«Имя должно быть длиной не менее 2 символов», а затем я
также добавит,
«max length» и соответствующее сообщение будет,
«Имя не может быть больше 25».
Если у вас есть имя, которое состоит из 25 символов,
вы должны действительно проклинать своих родителей за это, поверьте мне,
одно из моих отчетных имен длинное второе имя,
и которое я не использую явно в своих документах.
Но, я могу понять боль,
если у вас длинное имя больше 25 символов.
Люди из некоторых штатов в южной части Индии имеют длинные имена,
мое государство включает, эй,
давайте повеселиться, пока мы на нем.
Хорошо, я также включу то же самое для фамилии.
Итак, я собираюсь отредактировать это
и указать то же самое, что и фамилия.
Итак, как вы видите внутри кода, вы можете указать набор сообщений об ошибках.
Теперь, если вы добавите новую проверку в свои формы,
все, что вам нужно сделать, это,
прийти сюда и добавить новое сообщение об ошибке в
этот объект JavaScript здесь, и ваш код будет работать нормально, как таковой.
Итак, это преимущество использования этого шаблона для разработки вашей проверки в коде.
Продолжая, позвольте мне определить проверку для телефонного номера и
две проверки для телефонных номеров, которые произойдут, является «обязательным».
Итак, я просто собираюсь скопировать «обязательно» оттуда,
и вставить его здесь,
, и я бы сказал,
«Номер телефона требуется», и следующее сообщение об ошибке будет для «шаблона».
Итак, сообщение об ошибке гласит:
«Номер телефона должен содержать только номера».
Итак, это другое сообщение, аналогично электронной почте.
Итак, как вы можете видеть значения, которые я использую здесь
, соответствуют именам валидатора, которые я использовал,
«средняя длина», «максимальная длина требуется», «шаблон».
Таким образом, аналогично для электронной почты
вы увидите «required» и «Email'.
Итак, я просто скопирую «обязательно» здесь и скажу: «Требуется электронная почта».
Другой шаблон, как вы помните, для электронной почты, и я бы сказал,
«Электронная почта не в допустимом формате».
Итак, как правило, если ваш email не содержит
знак @ и символы на обеих сторонах знака @,
то это не действительное письмо.
Этот валидатор электронной почты уже встроен в модуль угловых реактивных форм.
Итак, мы будем использовать электронную почту Validator здесь.
Итак, здесь у нас есть все сообщения проверки, определенные в коде.
Таким образом, это очень легко расширить их для дополнительных полей, если вам требуется, а также
добавить больше сообщений проверки для дополнительных валидаций
, которые вы можете ввести для каждого из этих полей формы.
Кроме того, эти ошибки формы объекта помогают мне отслеживать
все ошибки, связанные с каждым из элементов в моем телефоне.
Итак, в настоящее время я проверяю только эти четыре элемента,
, поэтому у меня есть только для этого.
Небольшая коррекция, «средняя длина» должна быть min,
маленькая 'l' и максимальная длина также с небольшим 'l',
аналогично для фамилии также.
Теперь напишем код для метода изменения значений on.
Итак, я собираюсь написать метод
здесь, «ValueChanged», а затем этот
возьмет параметр, возможно.
Вот почему я поставил вопросительный знак данных
, что означает, что параметр является необязательным.
Итак, первое, что я проверю, это «эта форма обратной связи»,
, что означает, что если форма обратной связи не была создана тогда,
и если этот метод вызывается,
то вы должны просто «вернуть» без чего.
Затем я определяю константу
, называемую «эта обратная связь
форма», просто чтобы легко определить остальную часть кода,
, то я бы сказал: «для поля
const в этом.form ошибок».
Итак, обратите внимание, что это поле будет принимать это.form ошибки,
объект ошибок формы, который мы определили ранее.
Итак, чувство означает, что я проверю все четыре.
Итак, всякий раз, когда я обнаруживаю какие-либо изменения,
имя, фамилия,
номер тел и адрес электронной почты.
Итак, вот почему эти четыре будут носить те же имена, что и мы использовали в форме
, и чтобы код, написанный здесь, был простым для работы.
Итак, теперь я собираюсь проверить поля формы.
Затем я бы сначала
убедиться, что в случае, если я ранее прикреплял какие-либо сообщения к этим полям формы,
форма ошибки объекта там,
, то я собираюсь очистить все из них.
Итак, вот почему, если вы вызываете это без параметра,
все поля ошибок формы будут очищены,
, а затем я бы сделал, «control FormGet».
Итак, обратите внимание, что я использую это поле, чтобы сделать FormGet,
я получаю доступ к этому конкретному полю формы.
Итак, обратите внимание, что раньше мы делали «feedbackform.this.feedbackform.get"firstname».
и так далее. Итак, я упростил то, что в эту конкретную константу, которую мы
определили здесь, а затем я скажу: «Если контроль».
Итак, что означает, что если элемент управления не равен нулю и «control.purged».
Итак, если это конкретное поле уже грязно
, а не «контроль действителен».
Итак, означает, что для каждого из полей
я буквально проверяю, является ли он действительным,
если он грязный,
, а затем, если элемент управления уже есть.
Затем я собираюсь проверить, какие ошибки были добавлены в
этот конкретный элемент управления формой там.
Итак, здесь я скажу
«const сообщения, равные
это.validation messages».
Обратите внимание, как я забираю
все сообщения проверки, соответствующие этому конкретному полю firstname,
lastname или telnum или email,
, а затем я проверю и посмотрим, нужно ли мне добавить это в поле.
Итак, как мне это сделать?
Итак, мы делаем для const ключа в control.errors.
Итак, обратите внимание, что этот элемент управления является формой обратной связь.get и.error,
, поэтому я проверяю, есть ли там какие-либо ошибки.
Тогда, в таком случае,
я добавлю это поле ошибок формы.
Итак, для этого конкретного элемента в объекте JavaScript, который я определил здесь,
я бы добавил ключ сообщений
плюс и пространство здесь.
Итак, теперь независимо от формы обследования ошибок
или соответствующее сообщение будет принято и прикреплено в,
, а затем мои ошибки формы JavaScript объект теперь будет содержать
все сообщения об ошибках, прикрепленные вместе, когда
этот конкретный на значения изменился метод крыс.
Теперь, этот конкретный фрагмент кода, который я заимствовал из
документацию проверки формы на angular.iu.
Я обнаружил, что это очень интуитивный способ проверки ошибок формы.
Итак, я подумал, почему бы не использовать это в наших угловых реактивных формах упражнений.
Итак, добавив туда этот код.
Теперь мое приложение готово выполнить проверку формы для моей реактивной формы.
Итак, теперь следующий шаг - перейти к контактному компоненту. html,
файл шаблона, а затем обновить файл шаблона.
Итак, перейдя к этому файлу шаблона,
мы теперь перейдем к форме,
и в этой форме теперь вместо того, чтобы делать все эти проверки в коде,
теперь мы можем упростить много кода здесь, в файле шаблона здесь.
Теперь вместо того, чтобы делать все эти проверки,
то, что мы понимаем, что объект ошибок формы JavaScript в
мой файл машинописного текста, если есть ошибки, то
ошибки формы JavaScript объект для этого конкретного поля,
будет иметь все сообщения об ошибках, прикрепленные к нему.
Если ошибок нет,
, то этих сообщений об ошибках там не будет.
Итак, это то, что я собираюсь использовать, чтобы проверить и
посмотреть, должен ли я отображать ошибку формы или нет.
Итак, на этот счет вместо того, чтобы проверять все это,
единственное, что мне нужно проверить здесь, это formErrors firstname, вот и все.
Так что, очень легко проверить на ошибки здесь.
Точно так же, так что весь этот код теперь упрощается здесь,
и аналогичным образом, когда вы проверяете сообщение здесь,
, что мы собираемся сделать, я собираюсь изменить все это от
требуется до formErrors.firstname.
Вот оно. Если это существует,
тогда все сообщения об ошибках, соответствующие этому, уже будут там,
, поэтому мне просто нужно сделать интерполяцию, а затем отобразить formErrors.firstname здесь,
так просто, как это.
Теперь вы видите, выполняя
все проверки ошибок формы и код и выполняя все проверки и так далее в коде,
вы уже построили сообщения об ошибках, которые нам нужно отобразить.
Все, что мы делаем, это мы берем это сообщение об ошибке, а затем помещаем
это в шаблон здесь, вот и все.
Код шаблона становится более упрощенным в этом конкретном случае
, а также выполняя проверку формы с использованием кода машинописного текста,
мы упростили шаблон здесь, в то же время мы можем сделать
более сложную проверку формы в нашем коде машинописного кода.
Я собираюсь идти вперед и сделать те же изменения в оставшихся полях здесь,
, поэтому для поля lastname
Я собираюсь снова заменить все это на formErrors.lastname.
Теперь, снова сделай то же самое для номера телефона.
Теперь, опять же, как вы видите, структура шаблона становится очень,
очень равномерной в этом случае.
Таким образом, это также еще один способ упрощения
структуры вашего шаблона, продолжая в поле электронной почты здесь.
Я собираюсь сделать то же изменение и в поле электронной почты.
Итак, я бы сказал formErrors.email
и заменить это на formatters.email.
Итак, как вы можете видеть,
ваш код шаблона значительно упростился по сравнению с предыдущим.
С этим все проверки ошибок, которые я требую
, были добавлены в мой шаблон, и мой шаблон теперь обновлен,
, поэтому давайте сохраним изменения.
Две другие вещи, которые мне нужно добавить, это атрибут
называется email в это конкретное поле под названием email.
Итак, помните, что мы добавили e-mail Validator здесь.
Итак, наряду с обязательным,
я собираюсь добавить электронную почту также в поле ввода здесь.
Аналогично, для telnum
мы используем шаблон там.
Итак, я собираюсь добавить в шаблон, так что это поле ввода для telnum.
Итак, в поле ввода я собираюсь добавить шаблон равен и
шаблон, который я собираюсь добавить, является
в квадратных скобках от нуля до девяти,
, а затем положить туда звезду.
Итак, что означает, что это что-то от нуля до девяти повторяется несколько раз.
Таким образом, номер телефона может содержать любые номера от нуля до девяти.
Любое число этих чисел.
Вы также можете поместить minlength и maxlength в поле telnum
, если для вашей конкретной страны номер телефона имеет фиксированный формат,
вы можете сделать это тоже.
Таким образом, это можно легко сделать.
Но в этом упражнении
я не добавлял ограничения minlength и maxlength для телнума здесь.
Теперь, что мы сделали все обновления,
давайте сохраним изменения, а затем пойти и взглянуть на форму в браузере.
Перейдя в браузер сейчас,
, давайте прокрутимся вниз до формы здесь.
Давайте набрать имя и, как вы видите, когда вы вводите только один символ,
то сообщение об ошибке немедленно отображается,
но в момент ввода дополнительных символов, что сообщение об ошибке исчезнет.
Аналогично, для фамилии.
Для номера телефона, если вы пытаетесь ввести что-либо, кроме номеров,
, тогда отображаются сообщения об ошибках.
Таким образом, вы можете ввести,
аналогично для электронной почты, так что вы видите, что адрес электронной почты ненедопустимый формат будет отображаться.
Если у вас нет электронного письма, то он также показывает сообщение об ошибке.
Но, когда вы вводите что-то вроде этого,
то это считается допустимым форматом электронной почты, поэтому он будет принят.
Таким образом, это набор сообщений об ошибках и проверка формы
сделано полностью в коде, как это было сделано в этом конкретном упражнении.
Итак, этим мы завершаем это упражнение.
В этом упражнении мы видели, как использование изменения значения наблюдается,
, и мы также видели, как мы можем сделать проверку формы в нашем коде машинописного кода.
Это завершает это упражнение.
Это хорошее время для вас, чтобы сделать git commit с
сообщение reactive образует часть третья.