Мы только что узнали об угловой поддержке форм,
и, в частности, формы, управляемой шаблоном.
В этом упражнении мы создадим форму, управляемую шаблоном, а затем включим эту
в диалог компонента входа, который мы создали в предыдущем упражнении.
В этой лекции форма, управляемая шаблоном, которую мы создаем,
позволяет пользователю ввести свое имя пользователя и пароль в форму входа
, а затем отправить эту информацию в наше приложение.
Теперь, как эта информация обрабатывается на стороне сервера,
, который остается на более позднем курсе.
Но на данный момент у нас есть способ захватить имя пользователя и пароль
, представленные пользователем через шаблон входа формы,
, который мы разработаем в этом упражнении.
Продолвая упражнение,
первым шагом, чтобы иметь возможность использовать
управляемых шаблонами форм, является перейти в app module.ts
файл, а затем импортировать несколько вспомогательных модулей для нашего приложения.
Итак, первое, что я собираюсь импортировать, это
MatFormFieldModule из поля формы материала Angular
.
Таким образом, это позволяет нам группировать кучу элементов в поле формы.
Затем мы также импортируем MatInputModule.
Модуль ввода поддерживает компонент ввода, который представляет собой
стилизованный компонент Angular Material
, который поддерживает поле формы ввода из HTML-форм здесь.
Затем, также, позвольте мне импортировать MatCheckbox,
соответствующий модуль из флажка Angular Material.
Итак, эти три поддерживают
три элемента формы, которые мы будем использовать, когда мы создаем наше приложение.
Модуль поля формы позволяет нам группировать кучу элементов формы там.
Модуль ввода позволяет нам создать поле ввода там.
Модуль Checkbox, как вы и ожидали,
позволяет нам создать флажок.
Кроме того, мне также нужно импортировать
FormsModule из угловых форм.
FormsModule - это тот, который поддерживает формы в угловом.
Это тот, который поддерживает формы, управляемые шаблонами.
Итак, теперь, когда мы импортировали эти, очевидно,
следующий шаг заключается в том, чтобы войти в декоратор NgModule, а затем вытащить их на место здесь.
Итак, мы зайдем сюда, а затем введем FormsModule.
Позвольте мне ввести FormFieldModule,
InputModule, CheckboxModule здесь.
Тогда, теперь мой модуль приложения готов
для поддержки использования шаблонов форм в нашем приложении.
Теперь, когда мы закончили это,
перейдем к компоненту входа.
Большая часть нашей работы находится в компоненте логина.
Позвольте мне сначала создать форму.
Итак, зайдя в файл шаблона компонента входа,
позвольте мне добавить в шаблон для нашей формы, чтобы создать форму здесь.
Итак, в верхней части
я создаю p
, который будет отображать информацию, которую я набрал в форме.
В коде у нас будет переменная JavaScript под названием user,
, которая будет привязана к полям в этой форме.
Теперь, когда мы создадим это,
тогда станет более понятным.
Теперь, здесь, включив это,
, что я разрешаю, это показать изменения.
Когда мы вводим информацию в форму,
соответствующие изменения, которые происходят в коде
отражают состояние формы, могут быть показаны прямо там.
Теперь, кроме того, теперь я собираюсь создать форму здесь.
Итак, мы зайдем, а затем добавим элемент формы здесь.
К этому элементу формы
я собираюсь применить
атрибут novalidate здесь, потому что
мы хотим, чтобы проверка формы была позаботилась Угловой, а не
стандартной проверки формы HTML
, что поддержка браузера.
Итак, мы собираемся перенести эту ответственность на наше Angular приложение.
Итак, вот почему я указываю атрибут novalidate для моего телефона.
Итак, это создает мою форму здесь.
Внутри здесь, я собираюсь использовать mat-dialog-контент.
Теперь, mat-dialog-content, как вы и ожидали,
- это область, которая содержит содержимое самого диалога.
Итак, вот почему мы помещаем этот мат-диалог-контент здесь.
Тогда, здесь, я создаю здесь свою форму.
Итак, я положил p туда.
Внутри этого p, я буду использовать поле матовой формы здесь.
Таким образом, поле mat-form-field позволяет мне группировать набор
связанных с формой элементов, которые я использую вместе.
Итак, здесь, я поставлю вход здесь.
Итак, поле формы ввода из HTML файлов форм.
Затем, к этому, я применим атрибут matInput
, который позволит нам применить стиль дизайна материала для этого ввода.
Затем мы дадим заполнитель для этого как имя пользователя,
и, как вы ожидали,
и тип будет тип текста здесь.
Позвольте мне добавить в ngModel.
Таким образом, форма, управляемая шаблоном, поддерживается через атрибут ngModel здесь.
Итак, с ngModel.
Итак, вы можете увидеть способ объявления этого в папке «Входящие».
Тогда мы скажем user.username.
Итак, этот пользователь будет объектом JavaScript в моем файле TypeScript,
который будет содержать свойство имени пользователя там,
, которое будет отслеживать значение, которое вы вводите в это поле ввода в моей форме там.
Итак, вот почему мы привязываем эту информацию поля ввода к этому объекту JavaScript.
Итак, это двусторонняя привязка данных, которую мы делаем
между элементом формы и соответствующим кодом JavaScript.
Тогда мы дадим это имя в качестве имени пользователя здесь.
Итак, это мои первые поля формы, которые я добавил здесь.
Теперь, аналогично, я добавлю во второе поле формы для пароля.
Так что, для этого, позвольте мне просто скопировать это, а затем вставить его сюда.
Итак, второе поле будет Input, matInput,
заполнитель пароль,
, а затем тип - пароль.
Таким образом, элемент ввода пароля из HTML5 формы поддержки.
Сам ngModel будет привязан к паролю пользователя и имя будет паролем.
Итак, вы видите, что объект JavaScript пользователя теперь содержит два свойства:
имя пользователя и пароль, которые будут отслеживать учетные данные пользователя здесь.
Итак, эти два поля формы внутри этого p здесь,
, а затем также мы добавим в одном
больше называется мат-флажок.
Вы видели, что мы включили модуль чекбокса раньше.
Итак, мы собираемся добавить в это.
Теперь, этот флажок, который при галочке будет информировать
мое угловое приложение, что имя пользователя и пароль должны быть сохранены в приложении.
Итак, позвольте мне связать это с моделью NG для
соответствующего свойства, называемого metrie в объекте пользователя.
Таким образом, это будет,
это свойство будет либо истинным, либо ложным в зависимости от
, установлен ли флажок или снят.
Так вот так мы отслеживаем.
Итак, мы делаем двустороннюю привязку данных между этим флажком и
это свойство называется помнить о пользовательском объекте JavaScript в моем коде.
Тогда имя будет запомниться,
и тогда мы дадим это ярлык, как помните меня.
Итак, когда пользователь проверяет это,
, то информация пользователя будет запоминаться здесь.
Итак, это мат-чекбокс, который мы добавили.
Итак, у нас есть три поля здесь,
имя пользователя, пароль,
, а затем флажок здесь в моей форме здесь.
Итак, это содержание диалога с матами.
Теперь, в дополнение к контенту mat-диалога,
я также могу добавить действия mat-диалога здесь.
Теперь действия диалога могут содержать кнопки, соответствующие этому диалоговому окну.
Итак, это то, что будет действовать как кнопки действий в диалоге,
, а также так как они заключены внутри формы,
эти кнопки также будут выступать в качестве кнопок отправки формы для меня.
Итак, здесь, позвольте мне сделать span класса flex spacer,
, а затем позвольте мне добавить кнопку
mat-button, а затем эту кнопку,
я также превращу это в кнопку закрытия матового диалога.
Таким образом, это будет кнопка отмены, которую я включу в мою форму здесь,
то это нажато диалог будет отклонен,
и, по сути, это означает, что вы не отправляете форму там.
Таким образом, это также действует как кнопка отмены для формы
, а затем также отклоняет диалог в то же время.
Итак, используя этот атрибут к этой кнопке,
мы объявляем это как кнопка, которая отклоняет ошибку,
так же, как у нас есть эта кнопка на панели инструментов.
Итак, матовый диалог закрывается там.
Тогда другая кнопка, что мы будем иметь
для отправки, так что
этот тип кнопки будет кнопка отправки внутри формы там.
Итак, когда это нажата,
, который запускает представление формы для этой формы здесь,
, а затем позвольте мне добавить в класс к этому,
мы скажем фоновый основной, и текст цветочный.
Эти классы я уже добавил в свой файл styles.ACSS.
Итак, текст цветочный белый,
и эта кнопка будет помечена как кнопка входа там.
Итак, это будет синяя кнопка цвета, которая будет отображаться на экране.
Итак, при этом в шаблоне создается моя структура формы.
Теперь следующий шаг - перейти в код, а затем обработать представление формы.
Итак, теперь собирается войти в файл component.ts,
нам нужно обработать форму отправки здесь.
Теперь, первый шаг, который я собираюсь сделать, это когда этот компонент входа будет создан,
мы создадим объект пользователя здесь со свойствами имени пользователя,
, который будет пустой строко,
пароль, который также будет пустой строкой, чтобы начать с
, а затем запомнить, что является ложным.
Теперь, объявив это здесь,
мы также говорим, что теперь можем связать в
эти три свойства с тремя элементами формы в моем шаблоне.
Итак, это то, чего мы добились здесь.
Для конструктора позвольте
мне ввести диалог ref здесь,
mat-диалог ref, и этот диалог mat ref будет принимать соответствующий компонент.
Итак, это ссылка на этот компонент входа здесь.
Итак, это говорит нам, когда это- когда это представлено,
, как справиться с этим.
Итак, здесь, позвольте мне добавить в функцию on submit здесь,
и внутри функции on submit,
Я собираюсь просто войти в систему,
регистрировать соответствующую информацию о пользователях,
, поэтому пользователь нажимает на форму входа,
форму входа и отправляет форму входа.
Я просто собираюсь зарегистрировать информацию пользователя на консоли в данный момент.
Позже мы будем проектировать в серверном курсе.
Мы будем обрабатывать фактический процесс входа в систему, когда
наш сервер будет готов и сможет обработать логин пользователя.
Итак, после этого мы скажем, что диалог закрыт.
Теперь, почему мы включаем это здесь?
Итак, когда форма будет отправлена,
мы также хотим уволить компонент там,
компонент диалога там.
Итак, называя это,
этот диалог ref закрыть,
мы просим компонент диалога быть закрыт здесь.
Итак, вот почему я получаю ссылку на компонент входа здесь,
, который действует как мой компонент диалога здесь.
Таким образом, мы сможем закрыть компонент диалога, сделав это.
Таким образом, как только пользователь отправляет форму,
вы будете регистрировать информацию пользователя,
, а затем закрыть диалоговое окно. Вот оно.
Давайте сохраним изменения, а затем пойдем и посмотрим на обновленное приложение.
Зайдите в наше приложение в браузере,
позвольте мне открыть консоль JavaScript, чтобы вы могли видеть информацию, вошедшей в систему.
Позвольте мне открыть диалог входа здесь с формой уже на месте,
имя пользователя и пароль уже на месте.
Итак, позвольте мне ввести имя пользователя.
Я здесь самовлюбленный.
Итак, я набираю имя пользователя и пароль здесь.
Теперь обратите внимание, что когда я набираю информацию здесь,
, поскольку я показываю значение объекта JavaScript пользователя здесь,
любые изменения, которые я делаю, немедленно отражаются на экране здесь.
Также флажок «Запомнить» установлен и выключен здесь.
Затем, когда я отправлю форму здесь,
вы можете видеть, что в консоли,
информация пользователя регистрируется на консоли,
имя пользователя, пароль,
и значение запоминания блокируется на консоли.
Итак, теперь вы можете видеть, что моя форма входа,
форма, управляемая шаблоном, работает правильно.
С этим мы завершаем это упражнение
, где мы видели, как мы можем разработать шаблон управляемой формы в нашем угловом приложении.
Это хорошее время для вас, чтобы сделать Git Commit с сообщением,
Шаблон Driven Forms Часть 1.