Skip to content

Instantly share code, notes, and snippets.

@feliperfranco
Last active August 20, 2019 18:02
Show Gist options
  • Save feliperfranco/8b0d0abe81ad787f31947abad760bf89 to your computer and use it in GitHub Desktop.
Save feliperfranco/8b0d0abe81ad787f31947abad760bf89 to your computer and use it in GitHub Desktop.
Criação de formulários com grupo N com Reactive Forms
<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>
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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment