Если оставшийся код необходим для полной иллюстрации, я бы выделил дополнительное время, чтобы позже обновить свой ответ. Наслаждайтесь!

урсе создания кастомауправления в качестве компонентов, но я не могу понять, как создавать собственныегруппы.

То же самое мы можем сделать этореализацииControlValueAccessor и используя пользовательский компонент, такой как<my-cmp formControlName="foo"></my-cmp>Как мы можем достичь этого эффекта дляa группа?

<my-cmp formGroupName="aGroup"></my-cmp>

Два очень распространенных варианта использования: (а) разделение длинной формы на этапы, каждый шаг в отдельном компоненте, и (б) инкапсуляция группы полей, которые появляются в нескольких формах, таких как адрес (группа страны, штат, город) , адрес, номер здания) или дата рождения (год, месяц, дата).

Пример использования (не фактический рабочий код)

Родитель имеет следующую форму, построенную сFormBuilder:

// parent model
form = this.fb.group({
  username: '',
  fullName: '',
  password: '',
  address: this.fb.group({
    country: '',
    state: '',
    city: '',
    street: '',
    building: '',
  })
})

Родительский шаблон (недоступный и несемантический для краткости):

<!-- parent template -->
<form [groupName]="form">
  <input formControlName="username">
  <input formControlName="fullName">
  <input formControlName="password">
  <address-form-group formGroup="address"></address-form-group>
</form>

Теперь этоAddressFormGroupComponent знает, как обращаться с группой, в которой есть эти специфические элементы управления.

<!-- child template -->
<input formControlName="country">
<input formControlName="state">
<input formControlName="city">
<input formControlName="street">
<input formControlName="building">

Ответы на вопрос(1)

Ваш ответ на вопрос