Estou ciente de criar personalizadocontroles como componentes, mas não consigo descobrir como criargrupos.

O mesmo podemos fazer issoimplementaçãoControlValueAccessor e usando um componente personalizado como<my-cmp formControlName="foo"></my-cmp>, como podemos obter esse efeito paraa grupo?

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

Dois casos de uso muito comuns seriam (a) separar um formulário longo em etapas, cada etapa em um componente separado e (b) encapsular um grupo de campos que aparecem em vários formulários, como endereço (grupo de país, estado, cidade) , endereço, número do edifício) ou data de nascimento (ano, mês, data).

Exemplo de uso (não código de trabalho real)

Pai tem o seguinte formulário construído comFormBuilder:

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

Modelo pai (inacessível e não-semântico por questões de concisão):

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

Agora issoAddressFormGroupComponent sabe como lidar com um grupo que possui esses controles específicos.

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