Angular oferece duas abordagens para forms. Forms orientadas a templates são simples e definidas em HTML; reactive forms são definidas em TypeScript e oferecem mais controle — melhor para forms complexos, dinâmicos ou com validação pesada.
// just import FormsModule; minimal TS
Submit
A estrutura do form e validação vivem no template via diretivas ngModel. Simples de configurar, mas o modelo do form é implícito e mais difícil de testar/manipular programaticamente.
import { FormBuilder, Validators } from "@angular/forms";
export class SignupComponent {
constructor(private fb: FormBuilder) {}
form = this.fb.group({
email: ["", [Validators.required, Validators.email]],
password: ["", [Validators.required, Validators.minLength(8)]],
});
onSubmit() {
if (this.form.valid) console.log(this.form.value);
}
}
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input formControlName="email" />
<input formControlName="password" type="password" />
<button [disabled]="form.invalid">Submit</button>
</form>
O form é um objeto explícito (FormGroup/FormControl) que você constrói em TS. Isso o torna observável, testável e fácil de manipular (adicionar/remover campos, reagir a mudanças via valueChanges).
Template-driven Reactive
Where defined HTML (ngModel) TypeScript (FormBuilder)
Form model implicit/async explicit, synchronous object
Validation directives in template validators in code
Dynamic forms hard easy (add/remove controls in code)
Testability harder straightforward (it's just an object)
Best for simple forms complex/dynamic/validated forms
this.form.get("email")!.valueChanges.subscribe(v => ...); // react to changes
this.form.valid; // synchronous validity check
Escolher a abordagem certa para forms importa para manutenibilidade: forms orientadas a templates para forms rápidas e simples; reactive para qualquer coisa complexa — assistentes multi-etapas, conjuntos de campos dinâmicos, validação entre campos ou forms que precisam de testes unitários.
O modelo explícito e observável de reactive forms é geralmente preferido em aplicações sérias porque é mais poderoso, testável e escalável, mesmo exigindo mais código inicial.