Angular offers two approaches to forms. Template-driven forms are simple and defined in the HTML; reactive forms are defined in TypeScript and offer more control — better for complex, dynamic, or heavily-validated forms.
// just import FormsModule; minimal TS
Submit
The form structure and validation live in the template via ngModel directives. Simple to set up, but the form model is implicit and harder to test/manipulate programmatically.
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>
The form is an explicit object (FormGroup/FormControl) you build in TS. This makes it observable, testable, and easy to manipulate (add/remove fields, react to changes 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
Choosing the right form approach matters for maintainability: template-driven for quick, simple forms; reactive for anything complex — multi-step wizards, dynamic field sets, cross-field validation, or forms needing unit tests.
Reactive forms' explicit, observable model is generally preferred in serious applications because it's more powerful, testable, and scalable, even though it requires more upfront code.