Olá, pessoal! Nessa trigésima segunda aula do treinamento, iremos implementar o formulário reativo.
O Formulário Reativo (Reactive Forms) é uma ferramenta poderosa do Angular para criar e gerenciar formulários de forma robusta e organizada. A grande diferença dele é que o controle total do formulário fica no código TypeScript, e não no HTML.
No arquivo principal.ts, podemos criar a estrutura acima do construtor:
// Formulário reativo
formulario = new FormGroup({
codigo: new FormControl(''),
nome: new FormControl(''),
nota1: new FormControl(null),
nota2: new FormControl(null)
});
No arquivo principal.html:
<!-- Formulário -->
<form [formGroup]="formulario">
<input type="hidden" formControlName="codigo">
<input type="text" formControlName="nome" placeholder="Nome" class="form-control">
<input type="number" formControlName="nota1" placeholder="Nota 1" class="form-control">
<input type="number" formControlName="nota2" placeholder="Nota 2" class="form-control">
@if (btnCadastrar()) {
<input type="button" value="Cadastrar" class="btn btn-primary">
} @else {
<input type="button" value="Alterar" class="btn btn-primary">
<input type="button" value="Remover" class="btn btn-primary">
<input type="button" value="Cancelar" class="btn btn-primary">
}
</form>
Abaixo compartilho nossa aula no YouTube: