Шаблоны FormBuilder
Создавайте сложные формы с помощью FormBuilder
«Шаблоны FormBuilder» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Меньше шаблонного кода
FormBuilder — это служба, которая создаёт группы, элементы управления и массивы формы с помощью краткого синтаксиса, избавляя от повторяющихся вызовов new FormControl(...).
Внедрение FormBuilder
Внедрите его в компонент.
private fb = inject(FormBuilder);Создание группы
fb.group принимает объект, сопоставляющий имена с начальными значениями (при необходимости — с валидаторами).
form = this.fb.group({
email: ['', Validators.required],
age: [0]
});Кортеж значения и валидаторов
Каждая запись может быть кортежем: [initialValue, syncValidators, asyncValidators].
password: ['', [Validators.required, Validators.minLength(8)]]Конструктор с запретом null
fb.nonNullable создаёт элементы управления, которые никогда не имеют значения null, поэтому при сбросе возвращается начальное значение, а не null.
form = this.fb.nonNullable.group({
name: '',
active: true
});Зачем нужен nonNullable
С nonNullable типы значений больше не содержат | null, а reset() восстанавливает исходное значение по умолчанию, что обычно и требуется.
Создание массивов
fb.array создаёт FormArray; объединяйте его с fb.group для создания массивов групп.
form = this.fb.group({
items: this.fb.array([])
});Вспомогательная функция для элементов массива
Фабричный метод обеспечивает единообразное создание элементов массива.
newItem() {
return this.fb.group({
label: [''],
qty: [1]
});
}Добавление элементов
Добавьте созданную группу в массив с помощью push.
get items() {
return this.form.controls.items as FormArray;
}
add() { this.items.push(this.newItem()); }Явная конфигурация элемента управления
Чтобы включить nonNullable для отдельного элемента управления, передайте объект параметров вместо кортежа.
token: this.fb.control('', { nonNullable: true })Когда использовать FormBuilder
Используйте FormBuilder для большей читаемости в крупных формах. Явный API new FormControl эквивалентен ему и иногда понятнее для отдельных элементов управления.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли способы использования FormBuilder.
Повторение
Вы узнали, что FormBuilder (fb.group, fb.control, fb.array) сокращает объём шаблонного кода, кортежи содержат значение и валидаторы, а fb.nonNullable создаёт элементы управления без null, сброс которых возвращает значения по умолчанию.
Часто задаваемые вопросы
Урок «Шаблоны FormBuilder» бесплатный?
Да — полный текст урока «Шаблоны FormBuilder» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Шаблоны FormBuilder»?
Создавайте сложные формы с помощью FormBuilder Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Шаблоны FormBuilder»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Типизированные реактивные формы
- FormArray и динамические поля
- Асинхронные валидаторы
- Шаблоны FormBuilder