Типизированные реактивные формы
Создавайте формы со строгой типизацией
«Типизированные реактивные формы» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Зачем нужны типизированные формы
До Angular 14 значения реактивных форм имели тип any. Типизированные реактивные формы обеспечивают полную типобезопасность: компилятор знает структуру значения формы и имена её элементов управления.
Типизированный FormControl
FormControl является обобщённым типом. Укажите тип значения, чтобы чтение и запись проверялись.
const name = new FormControl<string>('', {
nonNullable: true
});Типизированный FormGroup
FormGroup выводит тип своего значения из переданных ему элементов управления.
const form = new FormGroup({
email: new FormControl(''),
age: new FormControl(0)
});Выведенный тип значения
Значение расположенной выше группы имеет тип { email: string | null; age: number | null }, и всё это проверяется во время компиляции.
const v = form.value; // typed automaticallyДопустимость null
По умолчанию элементы управления можно сбросить в null, поэтому их тип значения включает | null. Используйте nonNullable, чтобы исключить null.
new FormControl('', { nonNullable: true });
// value type: string (no null)Безопасный доступ к элементам управления
form.controls.email имеет строгую типизацию, поэтому компилятор обнаружит опечатки в именах элементов управления.
form.controls.email.setValue('a@b.com');get и controls
Для типобезопасности предпочитайте form.controls.name вместо form.get('name'): get возвращает слабо типизированное значение AbstractControl | null.
getRawValue
getRawValue() возвращает все значения, включая отключённые элементы управления, в отличие от value, которое исключает отключённые элементы.
const all = form.getRawValue();Вложенные группы
Типизированные группы можно составлять вместе. Вложенный FormGroup добавляет свою типизированную структуру в значение родительской группы.
const form = new FormGroup({
user: new FormGroup({
first: new FormControl(''),
last: new FormControl('')
})
});Типобезопасность patchValue
patchValue принимает частичное значение формы; неизвестные ключи отмечаются компилятором.
form.patchValue({ email: 'x@y.com' });Перенос устаревших форм
Нетипизированные API, такие как UntypedFormGroup, предназначены для постепенного переноса. В новом коде для безопасности следует использовать типизированные классы.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли типизированные реактивные формы.
Повторение
Вы узнали, что типизированные реактивные формы делают FormControl/FormGroup обобщёнными, выводя проверяемую структуру значения; значения по умолчанию включают | null (этого можно избежать с помощью nonNullable), а доступ через controls безопаснее, чем через get.
Часто задаваемые вопросы
Урок «Типизированные реактивные формы» бесплатный?
Да — полный текст урока «Типизированные реактивные формы» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Типизированные реактивные формы»?
Создавайте формы со строгой типизацией Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Типизированные реактивные формы»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Типизированные реактивные формы
- FormArray и динамические поля
- Асинхронные валидаторы
- Шаблоны FormBuilder