Forms: template-driven vs reactive

Two legitimate models; one scales better

Template-driven forms (ngModel) are fastest to type for small demos. Reactive forms (FormGroup, FormControl) give you an explicit data structure in the component class — which is exactly what you need for dynamic fields, shared validation, and unit testing. Reach for reactive forms by default in real apps.

form = new FormGroup({
  email: new FormControl('', { validators: [Validators.required, Validators.email], nonNullable: true }),
  amount: new FormControl<number | null>(null, Validators.required),
});

submit() {
  if (this.form.invalid) return;
  this.api.submit(this.form.getRawValue()).subscribe();
}