С кратким пониманием угловых реактивных форм,
давайте перейдем к следующему упражнению.
В этом упражнении мы построим
угловую реактивную форму в угловом приложении, над которым мы работали до сих пор.
По пути мы укрепим наше понимание угловых реактивных форм.
Чтобы начать упражнение,
самый первый шаг, который нам нужно сделать, это импортировать
модуль угловых реактивных форм в наш модуль приложения.
Итак, давайте перейдем к модулю приложения
, а затем мы видим, что мы уже импортировали модуль форм ранее.
Мы также импортируем модуль угловых реактивных форм.
Итак, я собираюсь скопировать это, вставить это здесь,
, а затем изменить это на модуль Angular Reactive Forms.
После этого мы также должны включить это в наш декоратор.
Итак, спускаясь к декоратору здесь,
я собираюсь импортировать модуль Reactive forms в декоратор.
Два других модуля, которые нам нужно импортировать для
нашей формы является MatSelectModule и MatSlideToggleModule.
Модуль выбора позволяет нам использовать элемент выбора,
и SlideToggle позволяет нам использовать переключатель слайда в нашей форме.
Итак, чтобы сделать это, мы будем вводить
импорт MatSelectModule из угловой/материал/выбрать,
и импортировать MatSlideToggleModule из угловой/материал/слайд-переключения,
, а затем нам нужно добавить их в наш декоратор nGModel в импорте.
Итак, идя туда,
позвольте мне импортировать MatSelectModule и MatSlideToggleModule там.
Таким образом, с этими изменениями
наш модуль приложения теперь готов дать нам возможность
использовать модуль Reactive forms в нашем приложении.
На следующем шаге
, что я собираюсь сделать, это создать класс здесь под названием «Обратная связь».
Итак, я создам его в общей папке в файле feedback.ts.
Теперь это структура класса, который представляет
модель данных, соответствующую модели формы, которую мы собираемся использовать
в нашем угловом приложении.
Итак, я создаю класс с именем feedback.
В классе Feedback
я собираюсь включить несколько свойств;
имя, фамилия,
затем номер телефона, Telnum, email,
, то я согласен, что является логической переменной,
логическое свойство, contactttype, который имеет тип строки.
Вам станет яснее, почему я включаю все
, когда мы смотрим на сам дизайн формы.
Этот класс обратной связи соответствует отзывам, которые
пользователь может отправить о нашем ресторане в рамках приложения Angular.
Итак, это причина, по которой я создаю этот класс отзывов.
Мы собираемся отобразить это в модели формы в
один из компонентов там, а также вместе с этим,
я экспортирую константу, которая является строковым массивом под названием
contactttype, который, как я упомянул
, является строковым массивом, содержащим три строки здесь,
none, Tel и email.
Итак, теперь наша структура модели данных готова.
Итак, позже, когда мы разрабатываем нашу серверную сторону,
мы сможем сопоставить это с данными, которые мы храним на стороне сервера.
Итак, в рамках нашего углового приложения,
это формирует модель данных, которую мы собираемся использовать для нашего приложения так же, как блюдо,
лидер, и продвижение, которое мы разработали, это еще один класс, который
позволяет нам группировать вместе набор свойств в класс здесь.
Итак, как только мы закончим это,
давайте приступим к созданию формы Reactive.
Мы создадим форму Reactive в нашем контактном компоненте.
Итак, давайте перейдем к контактному файлу component.ts,
, а также мы собираемся включить
соответствующую форму в файл шаблона компонентов контакта.
Итак, в файле скрипта типа контактных компонентов
, так что это то, где мы собираемся подготовить нашу форму
, как мы видели, что форма Reactive построена в основном
в коде, а затем сопоставляется с элементами формы в файле шаблона.
Итак, здесь я собираюсь импортировать несколько классов.
Я импортирую FormBuilder,
затем FormBuilder и валидаторы.
Validators будут использоваться для проверки формы, которая будет в следующем упражнении,
, но я импортирую их уже на данный момент.
Они импортируются из библиотеки угловых форм.
Итак, как только мы импортируем это,
мы будем импортировать класс Feedback и константу contactttype
из файла/обратной связи
, который мы только что создали на предыдущем шаге.
Нам это нужно в нашем приложении.
Теперь, внутри моего класса здесь,
я собираюсь объявить несколько переменных, называемых feedbackForm, которые имеют тип FormGroup.
Это модель формы, которая собирается принять
Реактивная форма здесь, а затем я также
объявить переменную обратную связь типа Обратная связь,
, так что это будет соответствующая модель данных.
Позже это значение обратной связи может быть извлечено с сервера в нашем приложении
, а затем я также объявлю contactttype как переменную
, которая является строковым массивом contactttype.
Потому что мне нужно использовать это в нашем приложении.
Чтобы построить Reactive форму внутри конструктора,
я бы ввёл FormBuilder в конструктор здесь,
, и я бы создал отдельный метод под названием
createForm, который я буду вызывать внутри конструктора,
, поэтому, когда этот класс будет построен, форма будет создана.
Таким образом, createForm будет методом, в рамках которого я создаю фактическую форму.
Итак, позвольте мне добавить метод createForm здесь.
Это просто удобство, я мог бы просто
включил код непосредственно в сам конструктор,
, но вы увидите, что могут быть причины, по которым вам
может понадобиться вызвать этот createForm из других мест.
Итак, лучше поместить его в отдельный метод здесь.
Итак, я создам форму здесь, Reactive form,
, а затем поместим ее в переменную feedbackForm, которую я объявил ранее.
Итак, чтобы создать форму,
я собираюсь воспользоваться помощью FormBuilder,
FB, который я объявил в конструкторе,
, а затем FB предоставляет метод под названием Group, который позволяет мне
определить группу, FormGroup здесь.
Итак, внутри, теперь я собираюсь построить части формы там.
Итак, в этой группе
теперь я могу включить различные элементы управления формы там.
Итак, я бы сначала поставил имя,
затем фамилию.
Обратите внимание, как поля в моей форме
тесно дублируют поля в моем классе обратной связи.
Они не должны точно совпадать, но если они совпадают,
то передача данных между
модели данных и четырьмя моделями становится намного более простой.
Telnum, который я собираюсь оставить, потому что uh-
Я добавил имя, фамилию,
Telnum, электронную почту, и согласен, и тип контакта,
, который я буду устанавливать как нет, чтобы начать с.
Вспомните, что тип контакта представляет собой массив строк, содержащий три из них
, поэтому вы должны выбрать один из них, а затем сопоставить его с этим свойством здесь.
Итак, я выберу это как none, а затем сообщение,
которое будет обратная связь, которую пользователь дает о
наш ресторан, сопоставленный в строку здесь.
Итак, это различные области, которые станут частью нашей формы здесь.
Итак, как только у нас есть структура формы на месте здесь,
так что вы заметите, что когда этот метод вызывается,
эта форма будет реактивная форма будет создана в коде здесь.
Теперь нам нужно сопоставить это в виде,
в шаблон там.
Итак, мы сделаем это на следующем шаге.
Итак, теперь, перейдя к нашему файлу шаблона,
в файле шаблона компонента контакта,
мы прокрутим вниз, а затем включим это в
наш файл шаблона сразу после этого div здесь,
, поэтому у нас есть этот div в нашем представлении контактов, который содержит информацию о местоположении и так далее.
Сразу после этого я собираюсь создать еще один div внутри
, который мы разместим там реактивную форму.
Позвольте мне применить несколько гибких макетов
здесь к моему div.
Теперь этот размер формы, как вы можете видеть, должен быть
классом CSS, который я создаю немного позже.
Внутри этого div, я собираюсь разместить свою форму.
Итак, как только я поместил этот div в свой файл шаблона,
теперь позвольте мне начать с заголовка для этого.
Итак, мы скажем: «Пришлите нам свой отзыв».
Итак, вы ищете отзывы от посетителей вашего сайта.
Мы начнем строить форму.
Итак, позвольте мне начать с тега формы
здесь, а затем мы построим форму внутри этого тега формы здесь.
Итак, для формы, первое, что я сделаю, это применить
no validate, потому что проверка будет позаботиться угловой,
, а затем также применить группу форм здесь.
Итак, обратите внимание, что эта группа форм - та, которая свяжет меня с реактивной моделью формы
, которую я создал в своем коде здесь.
Итак, делая это,
мы привязываем в этой реактивной форме в шаблоне к
соответствующей модели формы в нашем файле машинописного текста там.
Итак, как мы это делаем, мы объявляем группу форм и форму обратной связи.
Я покажу вам, как вы свяжите в
оставшиеся элементы формы с
соответствующие свойства в модели формы за короткое время.
Итак, после того, как мы сделаем это,
давайте поставим в нашей форме элементы на место внутри этой модели формы.
Итак, я объявлю P здесь, а затем внутри я
буду использовать поле mat-form здесь,
, к которому я буду применять класс CSS под названием Half-width,
и закрыть это.
Таким образом, это поставило бы мой первый элемент управления формой на место здесь.
Итак, здесь, я поместим вход, а затем применим MatInput из углового материала здесь.
Чтобы связать это с свойством внутри моей модели формы,
мне нужно было бы сделать FormControlName,
, а первый - имя.
Таким образом, этот вход теперь привязан к свойству первого имени
, которое я определил внутри моей модели формы, которую я определил в коде.
Имя, а затем я определяю
заполнитель как имя.
Итак, как вы и ожидали,
это поле ввода будет использоваться для ввода в
имя пользователя, введите текст.
Интересно, что вы видите, что у нас нет ng-модели здесь
или любой из переменных шаблона и так далее в моей форме больше.
Реактивные формы действуют по-разному.
Итак, как вы видите в реактивных формах,
вы сопоставите группу форм, а затем попробуйте имена элементов управления формой.
Если вы создаете элементы управления формы с классом управления формой,
вы объявите это как элемент управления формой в квадратных скобках, а затем сопоставите
с соответствующим элементом управления формой, который вы создаете в своем скептическом типе.
Но теперь, поскольку мы используем компоновщик форм,
мне нужно только связать в группе форм, как
это в моей форме к соответствующей модели формы,
, а затем остальные из них,
я объявляю как имя элемента управления формы, а затем сопоставляю их, чтобы
соответствующие свойства в
элемент управления формой модель, которую у меня есть в моем машинописном коде.
Таким образом, это создаст там первое поле имени.
Позвольте мне скопировать это.
Мне нужна фамилия.
Итак, я собираюсь скопировать это, а затем сказать, что имя элемента управления формы - Фамилия,
и заполнитель - Фамилия,
и тип, Текст, здесь.
У меня было имя,
У меня была фамилия, и если вы посмотрите на модель управления формой,
вы увидите, что после имени и фамилии,
У меня есть номер телефона в качестве следующего,
, поэтому я собираюсь вставить это здесь.
Затем имя элемента управления формы здесь Telnum,
и заполнитель номер телефона,
и тип Тел.
Пока мы на нем,
Я буду привязывать в обязательном к этим, хотя это не требуется.
Но позвольте мне добавить это.
Теперь, номер телефона, тогда у меня есть электронная почта.
Итак, следующее поле Email,
и заполнитель Email,
и тип также.
Итак, теперь у меня есть имя,
фамилия, номер телефона и электронная почта.
Следующая вещь, которую я собираюсь добавить, это переключение слайдов.
Раньше мы используем чекбокс.
Slidetoggle - это еще один элемент управления формы, который обеспечивает угловой материал,
, который несколько отличается от флажка и
Я думал, что я проиллюстрирую вам, используя его в форме здесь.
Теперь, здесь я буду использовать таблицу для позиционирования этих элементов.
Причина в том, что
эти элементы трудно позиционировать без использования таблицы.
Итак, внутри таблицы
я уверен, что вы все знаете, как использовать таблицу,
Я попытался расположить их, используя стандартный макет
и не был очень успешным с этим.
Поэтому вместо этого я прибег к использованию таблицы, чтобы разместить эти два элемента в моей форме.
Итак, мат-слайд-тумблер.
Итак, слайд-переключатель похож на флажок,
вы можете включить и выключить его,
и это разрешено для выбора логического значения здесь.
Итак, слайд-переключение и formControlName согласны.
Если вы помните, мы согласились,
, который был булевым свойством в элементе управления формой.
Тогда, для этого, я бы сказал,
можем ли мы связаться с вами?
Теперь вам станет яснее, когда вы увидите окончательную версию
этой формы, чтобы понять, почему мы это делаем.
Прямо сейчас, мы просто вложим все части в мою реакционную форму здесь.
Во второй части я собираюсь использовать select,
, который поддерживается через компонент mat-select в угловом материале.
Итак, MD выберите и для этого заполнитель,
я буду определять как «Как?»,
и formControlName, с которыми я собираюсь связать это
«contactttype» и закрыть выбор MD.
Таким образом, это позволяет мне создать элемент select в моей форме.
Итак, элемент select - это то, что дает мне
выпадающий список, из которого я могу выбрать один из них.
Итак, чтобы создать выпадающий список,
я собираюсь использовать опцию мат, которая доступна в качестве компонента в угловом материале.
Таким образом, матовая опция включена внутри mat-select.
Итак, для варианта,
Я собираюсь сделать*ngFor,
и я уверен, что вы помните директиву ngFor от ранее,
*ngFor «Пусть ctype contactType».
Теперь вы видите, почему я объявил переменную типа контакта
в моем коде раньше, а затем я бы сказал: [value] = «ctype».
Итак, я настраиваю свой вариант в моем выборе здесь и использую интерполяцию,
я буду вводить ctype здесь.
Таким образом, это даст мне раскрывающееся меню вариантов в моей форме там.
Итак, это следующая часть, а затем, наконец,
после таблицы, я собираюсь положить в текстовую область здесь.
Итак, я бы сказал p и закрыть, что P. Для стилизации реактивной формы
элемент P позволяет мне правильно позиционировать элементы.
Так вот почему я использую это.
Итак, как вы помните,
mat-form-field позволяет мне включать контейнер ввода здесь, а затем внутри я собираюсь определить текстовую область,
, которую я применяю
директиву matInput к этому.
Тогда formControlName, я собираюсь дать как «сообщение».
Таким образом, этот конкретный элемент формы позволяет пользователю ввести
в сообщение обратной связи для моего ресторана.
Итак, заполнитель «Your Feedback»,
, а затем я дам текстовой области размер
12 строк здесь, а затем закрыть текстовую область.
Итак, здесь у нас есть текстовая область с 12 строками.
Итак, это завершает большую часть формы.
Извините, это должно быть за столом.
Нам нужна кнопка, чтобы отправить форму.
Итак, прямо там, я включу кнопку типа = «отправить» и
эту кнопку отправки, я применим
матовую кнопку, а также применим класс = «background-primary».
Вы видели, как я применяю это к кнопке в предыдущем упражнении также,
похожий вид кнопки.
Итак, теперь моя форма почти готова.
Вы можете добавить несколько классов CSS в компонент контакта.
Три класса, которые я использовал, - это полная ширина,
это используется для установки размера элементов там.
Итак, полная ширина 95 процентов, половина ширины.
Таким образом, это позволяет мне правильно определять размер элементов,
45% половинной ширины, а затем размер формы.
Итак, я использую эти классы CSS в своей форме.
Таким образом, давайте сохраним изменения,
и быстро посмотрим на форму в нашем заявлении.
Перейдя в браузер,
в представлении контактов,
при прокрутке вниз вы теперь видите форму на месте в представлении контактов здесь.
Итак, вы видите отправить нам свой отзыв,
имя, фамилия, номер телефона,
электронной почты и переключатель слайда здесь,
так вы видите переключатель слайда на месте, а затем это выбор.
Выбор позволяет мне выбрать один из этих трех.
Значение по умолчанию равно none, а затем текстовая область здесь,
позволяет мне вводить комментарии к отзывам здесь, а затем кнопку отправки.
Таким образом, это завершает реактивную форму в
моей заявки, но когда вы нажимаете на кнопку Отправить,
вы не сможете отправить эту форму.
Итак, нам нужно добавить ngSubmit в нашу форму в шаблоне
, а затем добавить метод в наш файл сценария типа.
Перейдя к нашему коду,
к форме здесь,
вместе с формой novalidate FormGroup,
Я собираюсь добавить в ngSubmit в форму.
Я вызову метод как метод onSubmit.
Таким образом, моя форма теперь готова представить информацию.
Мне нужно войти в компоненты контакта, тип файла скрипта
, а затем создать метод onSubmit здесь.
Итак, в методе onSubmit
так бывает, что модель формы точно такая же, как модели данных,
, поэтому я могу просто взять значение модели формы.
Итак, когда у вас есть модель формы, подобная этой форме обратной связи,
форма обратной связи дает свойство, называемое значением,
, которое позволяет мне получить текущее значение всех этих из моей формы обратной связи.
Таким образом, это сформирует объект JavaScript,
, который я затем могу сопоставить в объект JavaScript обратной связи.
Бывает так, что оба из них имеют точно такую же структуру,
модель данных и модель формы.
Итак, вот почему я могу быстро загрузить значение
непосредственно в модель данных, когда пользователь отправляет форму.
Если ваша модель данных несколько отличается от модели формы,
вам нужно явно сопоставить отдельные свойства и
, что может быть сделано внутри этого метода.
Просто чтобы показать вам, что форма отправлена правильно,
Я собираюсь записать значение в консоль, консоль JavaScript.
Тогда я бы сказал, это.feedbackForm.reset.
Метод сброса позволяет сбросить форму в нормальное состояние,
удалив все записи, которые вы сделали в форме.
Итак, как только пользователь отправляет,
вы обычно захватите значения, а затем сбросите форму, чтобы
, что дальнейший ввод может быть сделан в виде отдельной формы.
Так что это метод сброса, который мы будем использовать здесь.
Таким образом, с этими изменениями
давайте сохраним изменения, а затем пойдем и посмотрим нашу форму в действии.
Последняя мелочь, которую я хочу добавить в свой шаблон, это показать
вам значения формы внутри моей формы,
, хотя в реальном приложении
вы не будете делать этого, но я просто хотел проиллюстрировать вам, как
вы можете видеть значения feedbackForm прямо здесь,
из feedbackForm модель.
Итак, я могу сделать внутри.
Я могу сказать feedbackForm.value и проник через json, чтобы показать здесь.
Аналогично, я могу сделать здесь, feedbackForm.
Существует еще одно свойство, связанное с этой моделью формы, называется status,
который показывает мне статус формы в данный момент,
является ли она действительной или недействительной.
Итак, я собираюсь добавить эти два в свою форму здесь,
, чтобы это было показано в моем шаблоне.
Это просто для того, чтобы дать вам мгновенное представление о том, что
модель формы содержит в моем файле сценария типа.
Давайте сохраним изменения и быстро посмотрим на нашу форму.
Возвращаясь к нашему браузеру,
вы можете видеть, что значения формы отображаются
здесь и форма находится в хорошей форме, чтобы позволить нам вводить значения.
Так что давайте набрать некоторые случайные значения здесь, и вы можете
сразу увидеть, что значение отражается в модели feedbackForm там,
справа вверху и по электронной почте.
Неважно, просто введите что-то.
Затем, этот переключатель,
вы можете видеть, что при включении и выключении,
согласие поворот меняется от ложного к true.
Так что позвольте мне оставить его на true, а затем выбрать.
Позвольте мне выбрать электронную почту, а затем вы увидите, что тип контакта здесь изменился на электронную почту.
Итак, вот как вы выбираете, чтобы изменить значение.
Итак, скажем, электронная почта, а затем здесь,
мы можем ввести сообщение.
Некоторый случайный текст здесь, и вы будете
в состоянии увидеть, что случайный текст отражается в сообщении.
Давайте представим форму.
Итак, когда вы нажимаете на Submit вы сразу видите в консоли,
значение печатается здесь,
в этом объекте здесь.
Таким образом, вы можете просмотреть все свойства для этого объекта,
модель формы обратной связи.
Итак, это иллюстрация реактивной формы в нашем приложении.
Это завершает это упражнение.
В этом упражнении мы видели, как мы можем создать
реактивную форму в нашем угловом приложении.
Это также хороший момент, когда вы можете сделать Git commit с сообщением,
reactive образует часть первую.