Formulários reativos tipados
Crie formulários com tipagem estrita.
Formulários reativos tipados é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 1 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.
Por que usar formulários tipados?
Antes do Angular 14, os valores dos formulários reativos eram tipados como any. Os formulários reativos tipados oferecem segurança de tipos completa: o compilador conhece o formato do valor do formulário e os nomes dos controles.
Um FormControl tipado
Um FormControl é genérico. Informe o tipo do valor para que as leituras e escritas sejam verificadas.
const name = new FormControl<string>('', {
nonNullable: true
});Um FormGroup tipado
Um FormGroup infere o tipo do seu valor a partir dos controles que você fornece.
const form = new FormGroup({
email: new FormControl(''),
age: new FormControl(0)
});Tipo de valor inferido
O value do grupo acima é tipado como { email: string | null; age: number | null }, tudo verificado durante a compilação.
const v = form.value; // typed automaticallyAceitação de nulos
Por padrão, os controles podem ser redefinidos para null, portanto o tipo do valor inclui | null. Use nonNullable para excluir nulos.
new FormControl('', { nonNullable: true });
// value type: string (no null)Acessando controles com segurança
form.controls.email tem tipagem forte, portanto erros de digitação nos nomes dos controles são identificados pelo compilador.
form.controls.email.setValue('a@b.com');get versus controls
Prefira form.controls.name a form.get('name') para obter segurança de tipos; get retorna um AbstractControl | null com tipagem fraca.
getRawValue
getRawValue() retorna todos os valores, incluindo os controles desabilitados, ao contrário de value, que omite os desabilitados.
const all = form.getRawValue();Grupos aninhados
Os grupos tipados podem ser compostos. Um FormGroup aninhado contribui com seu próprio formato tipado para o valor do grupo pai.
const form = new FormGroup({
user: new FormGroup({
first: new FormControl(''),
last: new FormControl('')
})
});Segurança de tipos com patchValue
patchValue aceita um subconjunto do valor do formulário; chaves desconhecidas são sinalizadas pelo compilador.
form.patchValue({ email: 'x@y.com' });Migrando formulários antigos
APIs sem tipagem, como UntypedFormGroup, existem para permitir uma migração gradual. O código novo deve usar as classes tipadas por segurança.
Verificação rápida
Verifique sua compreensão dos formulários reativos tipados.
Recapitulação
Você aprendeu que os formulários reativos tipados tornam FormControl/FormGroup genéricos, inferindo um formato de valor verificado; que os padrões incluem | null, o que pode ser evitado com nonNullable; e que o acesso por controls é mais seguro do que por get.
Perguntas Frequentes
A aula “Formulários reativos tipados” é grátis?
Sim — o texto completo de “Formulários reativos tipados” é 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 “Formulários reativos tipados”?
Crie formulários com tipagem estrita. 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 1 de 4.
Quanto tempo leva a aula “Formulários reativos tipados”?
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