Soy consciente de crear personalizadoscontroles como componentes, pero no puedo entender cómo creargrupos.

Lo mismo podemos hacer estoimplementarControlValueAccessor y usando un componente personalizado como<my-cmp formControlName="foo"></my-cmp>, ¿cómo podemos lograr este efecto paraa grupo?

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

Dos casos de uso muy comunes serían (a) dividir una forma larga en pasos, cada paso en un componente separado y (b) encapsular un grupo de campos que aparecen en múltiples formas, como la dirección (grupo de país, estado, ciudad , dirección, número de edificio) o fecha de nacimiento (año, mes, fecha).

Ejemplo de uso (no código de trabajo real)

El padre tiene el siguiente formulario construido conFormBuilder:

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

Plantilla principal (inaccesible y no semántica por brevedad):

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

Ahora estoAddressFormGroupComponent sabe cómo manejar un grupo que tiene estos controles específicos dentro de él.

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