Criação de formulários com grupo N com Reactive Forms

form-contato.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Contato</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <form [formGroup]="formContato" (ngSubmit)="onSubmit()">

    <ion-item-group>
      <ion-item-divider color="dark">
        <ion-label>Dados principais</ion-label>
      </ion-item-divider>

      <ion-item>
        <ion-label position="stacked">Nome</ion-label>
        <ion-input type="number" formControlName="nome"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label position="stacked">E-mail</ion-label>
        <ion-input type="number" formControlName="email"></ion-input>
      </ion-item>
    </ion-item-group>

    <ion-item-group>
      <ion-item-divider color="dark">
        <ion-label>Endereços</ion-label>
      </ion-item-divider>

      <div formArrayName="enderecos" *ngFor="let endereco of enderecos.controls; let i=index">
        <div [formGroupName]="i">
          <ion-item>
            <ion-label position="stacked">CEP</ion-label>
            <ion-input type="text" formControlName="cep"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label position="stacked">Logradouro</ion-label>
            <ion-input type="text" formControlName="logradouro"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label position="stacked">Número</ion-label>
            <ion-input type="text" formControlName="numero"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label position="stacked">Complemento</ion-label>
            <ion-input type="text" formControlName="complemento"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label position="stacked">Bairro</ion-label>
            <ion-input type="text" formControlName="bairro"></ion-input>
          </ion-item>

          <ion-item lines="none">
            <ion-label class="ion-text-end">
              <ion-button color="danger" fill="outline" (click)="removerEndereco(i)">Remover endereço</ion-button>
            </ion-label>
          </ion-item>
        </div>

        <ion-item-divider>
          <ion-label>
          </ion-label>
        </ion-item-divider>
      </div>

      <div margin-vertical>
        <ion-button color="secondary" (click)="adicionarEndereco()" fill="outline">Adicionar endereço</ion-button>
      </div>
    </ion-item-group>

    <div margin-vertical>
      <ion-button color="primary" expand="block" type="submit">Salvar</ion-button>
    </div>
  </form>
</ion-content>

form-contato.page.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'app-form-contato',
  templateUrl: './form-contato.page.html',
  styleUrls: ['./form-contato.page.scss'],
})
export class FormContatoPage implements OnInit {
  formContato: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.criarFormulario();    
  }

  get enderecos() {
    return this.formContato.get('enderecos') as FormArray;
  }

  criarFormulario() {    
    this.formContato = this.formBuilder.group({
      nome: [''],
      email: [''],
      enderecos: this.formBuilder.array([
        this.criarEndereco()
      ])
    });
    
  }

  criarEndereco() {
    return this.formBuilder.group({
      cep: [''],
      logradouro: [''],
      numero: [''],
      complemento: [''],
      bairro: ['']
    });
  }

  adicionarEndereco() {
    this.enderecos.push(this.criarEndereco());
  }

  removerEndereco(index: number) {
    this.enderecos.removeAt(index);
  }

  onSubmit() {
    console.log(this.formContato.value);
  }
}