FormArray e campos dinâmicos
Adicione e remova controles de formulário em tempo de execução.
FormArray e campos dinâmicos é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Conjuntos dinâmicos de campos
Alguns formulários têm uma quantidade variável de campos, como uma lista de números de telefone ou itens de uma lista. FormArray gerencia uma coleção ordenada e expansível de controles.
Criando um FormArray
Um FormArray contém uma matriz de controles ou grupos.
const phones = new FormArray([
new FormControl(''),
new FormControl('')
]);Dentro de um FormGroup
Incorpore a matriz a um grupo pai para que ela faça parte do valor do formulário inteiro.
const form = new FormGroup({
name: new FormControl(''),
phones: new FormArray<FormControl<string>>([])
});Adicionando controles
Chame push para adicionar dinamicamente um novo controle ao final.
addPhone() {
this.phones.push(new FormControl('', { nonNullable: true }));
}Removendo controles
Use removeAt(index) para excluir um controle específico.
removePhone(i: number) {
this.phones.removeAt(i);
}Renderizando com @for
Itere pelos controles da matriz no modelo, associando cada um pelo índice com formControlName.
<div formArrayName="phones">
@for (ctrl of phones.controls; track $index) {
<input [formControlName]="$index" />
}
</div>A diretiva formArrayName
formArrayName vincula um bloco do modelo à matriz, e o formControlName interno usa o índice numérico.
Matrizes de grupos
Para itens mais completos, armazene FormGroups na matriz; por exemplo, cada contato pode ter um nome e um número.
const contacts = new FormArray<FormGroup>([]);
contacts.push(new FormGroup({
label: new FormControl(''),
number: new FormControl('')
}));Renderizando itens de grupo
Use formGroupName com o índice de cada grupo na matriz.
@for (g of contacts.controls; track $index) {
<div [formGroupName]="$index">
<input formControlName="label" />
<input formControlName="number" />
</div>
}Lendo o valor
O valor da matriz é uma matriz simples, na ordem, refletindo os controles atuais.
const list = this.phones.value; // string[]Limpando a matriz
clear() remove todos os controles de uma só vez, o que é útil ao redefinir uma seção dinâmica.
this.phones.clear();Verificação rápida
Verifique sua compreensão de FormArray.
Recapitulação
Você aprendeu que FormArray gerencia uma coleção dinâmica e ordenada de controles ou grupos, usando push, removeAt e clear, renderizada com formArrayName junto de formControlName/formGroupName indexados.
Perguntas Frequentes
A aula “FormArray e campos dinâmicos” é grátis?
Sim — o texto completo de “FormArray e campos dinâmicos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “FormArray e campos dinâmicos”?
Adicione e remova controles de formulário em tempo de execução. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “FormArray e campos dinâmicos”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Formulários reativos tipados
- FormArray e campos dinâmicos
- Validadores assíncronos
- Padrões com FormBuilder