Formulários no Angular
O Angular oferece duas formas principais de trabalhar com formulários:
- Template-driven forms: mais simples e baseada em diretivas no HTML.
- Reactive forms: mais poderosa, baseada em código TypeScript e ideal para formulários complexos.
Template-driven Forms
Ideal para: formulários simples e pequenos.
Importações necessárias:
FormsModule
Exemplo de código
// app.module.ts
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [FormsModule]
})
export class AppModule { }<!-- app.component.html -->
<form #form="ngForm" (ngSubmit)="submitForm(form)">
<input name="email" [(ngModel)]="email" required />
<button type="submit">Enviar</button>
</form>// app.component.ts
export class AppComponent {
email = '';
submitForm(form: any) {
console.log('Email enviado:', this.email);
console.log('Form válido?', form.valid);
}
}Reactive Forms
Ideal para: formulários maiores, dinâmicos ou com regras complexas de validação.
Importações necessárias:
ReactiveFormsModule
Exemplo de código
// app.module.ts
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [ReactiveFormsModule]
})
export class AppModule { }// app.component.ts
import { FormGroup, FormControl, Validators } from '@angular/forms';
export class AppComponent {
loginForm = new FormGroup({
email: new FormControl('', [Validators.required, Validators.email]),
senha: new FormControl('', Validators.required)
});
enviar() {
if (this.loginForm.valid) {
console.log(this.loginForm.value);
}
}
}<!-- app.component.html -->
<form [formGroup]="loginForm" (ngSubmit)="enviar()">
<input type="email" formControlName="email" placeholder="E-mail" />
<input type="password" formControlName="senha" placeholder="Senha" />
<button type="submit">Entrar</button>
</form>
<p *ngIf="loginForm.get('email')?.invalid">
E-mail inválido
</p>Comparativo
- Template-driven: menos código TypeScript, mas menos controle.
- Reactive: mais controle, mais indicado para formulários dinâmicos, validações personalizadas e integração com serviços.