<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>