Реактивные формы в Angular предоставляют мощный способ обработки проверки форм и ввода данных пользователем. Одной из полезных функций Reactive Forms является возможность создавать вложенные группы форм, которые позволяют создавать сложные структуры форм. В этой статье мы углубимся в различные методы реализации вложенных групп форм в реактивных формах Angular, сопровождая их примерами кода.

Метод 1: использование FormBuilder
FormBuilder Angular предоставляет удобный способ создания вложенных групп форм. Вот пример:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-nested-form-group',
  templateUrl: './nested-form-group.component.html',
  styleUrls: ['./nested-form-group.component.css']
})
export class NestedFormGroupComponent implements OnInit {
  nestedForm: FormGroup;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.nestedForm = this.formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      address: this.formBuilder.group({
        street: ['', Validators.required],
        city: ['', Validators.required],
        state: ['', Validators.required],
        zip: ['', [Validators.required, Validators.pattern('[0-9]{5}')]]
      })
    });
  }
  onSubmit() {
    if (this.nestedForm.valid) {
      console.log(this.nestedForm.value);
    }
  }
}

Метод 2: создание вручную
В качестве альтернативы вы можете вручную создавать вложенные группы форм с помощью класса FormGroup. Вот пример:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@Component({
  selector: 'app-nested-form-group',
  templateUrl: './nested-form-group.component.html',
  styleUrls: ['./nested-form-group.component.css']
})
export class NestedFormGroupComponent implements OnInit {
  nestedForm: FormGroup;
  constructor() { }
  ngOnInit() {
    this.nestedForm = new FormGroup({
      firstName: new FormControl('', Validators.required),
      lastName: new FormControl('', Validators.required),
      address: new FormGroup({
        street: new FormControl('', Validators.required),
        city: new FormControl('', Validators.required),
        state: new FormControl('', Validators.required),
        zip: new FormControl('', [Validators.required, Validators.pattern('[0-9]{5}')])
      })
    });
  }
  onSubmit() {
    if (this.nestedForm.valid) {
      console.log(this.nestedForm.value);
    }
  }
}

Метод 3: динамическое добавление вложенных групп форм
Иногда может потребоваться динамическое добавление или удаление вложенных групп форм. Вот пример динамического добавления вложенных групп форм:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-nested-form-group',
  templateUrl: './nested-form-group.component.html',
  styleUrls: ['./nested-form-group.component.css']
})
export class NestedFormGroupComponent implements OnInit {
  nestedForm: FormGroup;
  constructor(private formBuilder: FormBuilder) { }
  ngOnInit() {
    this.nestedForm = this.formBuilder.group({
      people: this.formBuilder.array([])
    });
  }
  addPerson() {
    const person = this.formBuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required]
    });
    this.people.push(person);
  }
  removePerson(index: number) {
    this.people.removeAt(index);
  }
  onSubmit() {
    if (this.nestedForm.valid) {
      console.log(this.nestedForm.value);
    }
  }
  get people() {
    return this.nestedForm.get('people') as FormArray;
  }
}

Реализация вложенных групп форм в Reactive Forms позволяет создавать сложные и динамические формы в Angular. В этой статье мы рассмотрели три метода реализации вложенных групп форм: использование FormBuilder, создание вручную с помощью FormGroup и динамическое добавление вложенных групп форм. Эти методы обеспечивают гибкость и удобство при работе со сложными формами в Angular.