[МУЗЫКА]
Мы только что завершили изучение форм, управляемых шаблонами в
угловой в предыдущем уроке.
Angular также поддерживает другой способ проектирования форм, называемых как реактивные формы,
реактивные формы используют реактивный стиль программирования для поддерживающих форм.
Мы поговорим о реактивном программировании кратко в
одном из последующих уроков в этом модуле.
Но прямо сейчас мы будем иметь дело с реактивными формами и
посмотрим, как мы можем проектировать реактивные формы в угловых и
, каковы уникальные особенности выполнения реактивных форм в угловых последующих.
Реактивный стиль программирования выступает за явное управление данными
, протекающими между моделью данных, отличной от пользовательского интерфейса, и модель формы, ориентированная на UI
, и это подход, который реактивные формы принимают в Angular.
Теперь это может не иметь большого смысла для вас в данный момент, но по мере того, как мы завершаем это упражнение
и лекцию, вам станет еще яснее
, почему реактивный подход подходит для дизайна формы в определенных контекстах.
Теперь в реактивном подходе мы создаем дерево объектов управления угловой
формы, внутри класса компонента.
Теперь в шаблонах управляемых форм, которые вы видели ранее,
мы проектируем формы с использованием подхода шаблона HTML, поэтому
все элементы управления формы мы помещаем в эту форму в шаблоне HTML и
мы в первую очередь управляем данными, и они мы привязаны к их
объекта компонента через NG модель напрямую.
В этом подходе мы создадим эту структуру формы в нашем компоненте и
затем связать структуру формы в фирменные элементы управления в нашем шаблоне, поэтому
мы свяжем дерево форм, которое мы
создаем в нашем классе компонентов, с родной формой
элементов в нашем файле шаблона там.
Таким образом, в этом подходе класс компонентов имеет немедленный
доступ как к модели данных, так и к структуре управления формой и поэтому
мы можем затем взять модель данных и нажать ее в структуру управления формой и
соответственно взять информацию из структуры управления формы и
затем сопоставьте его с моделью данных.
Таким образом, модель данных, поступающая из задней части, может быть отображена в форме
структуры управления, которая отражается в представлении через этот шаблон
и мост между ними делается в классе компонентов
путем создания структуры формы внутри класса компонента.
Теперь это не имеет большого смысла для вас в данный момент, но
, когда мы выполняем упражнение, станет еще более понятным для вас, как эта привязка
между моделью данных и структурой управления фирмы может быть выполнена
внутри класса компонента в коде сценария типа класса компонентов.
Так вот, где мы будем использовать реактивные шаблоны, тестирование и валидацию
с большим преимуществом, поэтому этот подход reactive
поддерживает реактивные шаблоны программирования, как я уже сказал, мы поговорим
более реактивное программирование немного позже в этом модуле.
Также тот факт, что мы создаем формы в коде
, означает, что тестирование и оценка форм становится намного проще.
Шаблонные формы очень трудно проверить
, потому что большая часть структуры находится в коде шаблона, поэтому
реактивный подход подходит гораздо лучше для модульного тестирования и
также для проверки формы, как мы увидим немного позже в упражнении.
Давайте кратко рассмотрим некоторые из преимуществ использования реактивных форм.
Одним из преимуществ является то, что значения в том виде, в котором элементы
сразу доступны и синхронны с абстрактным кодом.
В шаблоне управляемой форме он принимает на цикл для
любые изменения, написанные шаблон, чтобы отразить в вашем коде там,
, но в реактивном подходе, синхронный бит, данные и
вид плотно поддерживается.
Во-вторых, реактивные формы, как я уже упоминал,
легче делать модульное тестирование, и это становится очень важным
, когда вы разрабатываете очень сложную репликацию угла.
Реактивные формы поддерживаются для некоторых классов
, доступных для библиотеки угловых форм.
Одним из них является класс FormControl, который управляет индивидуальной формой управления
, что мы включаем в нашу форму отдельные элементы, а также позволяет нам
отслеживать значение этих ограничений и выполнять проверку этих элементов.
FormGroup представляет собой группу FormControl, поэтому
, если вы хотите организовать FormControls вместе как группу, а затем
отслеживать информацию об этой группе в целом, то FormGroup
позволяет агломерации группы FormControls вместе.
Кроме того, у нас также есть класс AbstractControl, который является абстрактным
класс для классов FormControl, который также может быть использован в наших интересах
, хотя мы хотим увидеть их конкретно в упражнении позже,
, но мы вернемся, чтобы использовать их позже.
А также у нас есть класс FormArray, который позволяет определить
число-индексированный массив экземпляров AbstractControl,
снова, как AbstractControl, так и FormArray, мы не будем явно рассматривать
в этом конкретном уроке, но мы увидим их позже в курсе.
Еще одним интересным аспектом реактивных форм
является наличие FormBuilder.
Класс FormBuilder позволяет использовать для создания форм в нашем коде TypeScript и
затем иметь возможность связать их с этим шаблоном элементов управления там.
Таким образом, чтобы использовать класс Form Builder, вы импортируете Form Builder из угловых форм
, а затем после того, как вы можете использовать компоновщик форм для построения формы,
, как если вы используете и делаете то, что ваши классы конвертера форм и группы форм
классы, как мы видели на предыдущем слайде, что код немного сложнее.
Но используя класс FormBuilder, он уменьшает повторяемость инклитического в вашем коде
и делает его намного более компактным для определения шрифтов.
Мы будем использовать класс FormBuilder в качестве подхода к построению форм
в следующем упражнении и
этот пример получен из упражнения, которое вы будете делать сразу после этой лекции.
Таким образом, здесь вы можете видеть, что мы создали форму, как группа этих форм управления
элементов и каждый из них имеет определенное имя, а также значение, данное им.
Создавая модель формы в нашем машинописном коде,
вы не заполняете автоматически модель формы, вам нужно исключительно заполнить
модель формы, особенно если вы получаете данные в модели данных,
тогда модель данных должна быть сопоставлена в модель формы, чтобы заполнить значения,
, поэтому модель формы и модель данных хранятся отдельно в реактивных формах.
В шаблонах управляемых форм вы видели, что мы непосредственно пытаемся в данные
объектов из файла шаблона в наш абстрактный код.
Таким образом, в этом случае форма и модель данных хранятся отдельно, поэтому
любые изменения, которые вы вносите в элементы DOM
в вашей форме, будут перетекать в модель формы и
вы должны явно отражать данные формы обратно к
, что модель данных даже через сервис или любые средства, которые вы выбираете,
, поэтому это разделение помогает нам разработать наш код намного лучше, как мы увидим позже.
Для заполнения модели формы из модели данных доступны два метода.
У нас есть метод setValue (), который позволяет нам назначать каждый элемент управления формой
определенному значению из модели данных или у нас есть patchValue (),
, который позволяет обновлять только некоторые элементы управления в вашей модели формы.
Таким образом, как только вы получите модель данных из задней части, из модели данных,
вы можете паткнуть значения в свою модель формы или сопоставить значения из
вашей модели данных в вашу модель формы, очень часто, мы создадим модель данных,
, которая достаточно близко отражает структуру формы.
В следующем упражнении вы увидите, что у меня есть модель данных
, которая основана на классе,
, который очень близко отражает модель формы, которую мы используем в нашем примере там.
С этим быстрым пониманием реактивных форм, давайте теперь перейдем к упражнению
, где мы удвоим реактивную форму в рамках нашего углового приложения и
по пути консолидации некоторых терминологии и
также некоторые из идей, которые мы только что изучили в этом уроке.
[МУЗЫКА]