Το Angular προσφέρει δύο προσεγγίσεις για φόρμες. Οι φόρμες ελεγχόμενες από πρότυπο είναι απλές και ορίζονται στο HTML· οι αντιδραστικές φόρμες ορίζονται στο TypeScript και προσφέρουν περισσότερο έλεγχο — καλύτερες για περίπλοκες, δυναμικές ή εκτενώς επαληθευμένες φόρμες.
// just import FormsModule; minimal TS
<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
<input name="email" ngModel required email /> <!-- ngModel registers the field -->
<input name="password" ngModel required minlength="8" />
<button [disabled]="f.invalid">Submit</button>
</form>
Η δομή της φόρμας και η επαλήθευση ζουν στο πρότυπο μέσω ngModel οδηγιών. Εύκολη η ρύθμιση, αλλά το μοντέλο της φόρμας είναι σιωπηρό και δυσκολότερο στη δοκιμή/χειρισμό μέσω προγράμματος.
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>
Η φόρμα είναι ένα ρητό αντικείμενο (FormGroup/FormControl) που δημιουργείτε στο TS. Αυτό το κάνει παρατηρήσιμο, δοκιμάσιμο και εύκολο στον χειρισμό (προσθήκη/αφαίρεση πεδίων, αντίδραση σε αλλαγές μέσω 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
Η επιλογή της σωστής προσέγγισης φόρμας έχει σημασία για τη συντηρησιμότητα: ελεγχόμενη από πρότυπο για γρήγορες, απλές φόρμες· αντιδραστική για οτιδήποτε περίπλοκο — πολυβάθμιοι οδηγοί, δυναμικά σύνολα πεδίων, επαλήθευση μεταξύ πεδίων ή φόρμες που χρειάζονται δοκιμές μονάδας.
Το ρητό, παρατηρήσιμο μοντέλο αντιδραστικών φορμών είναι γενικά προτιμότερο σε σοβαρές εφαρμογές επειδή είναι πιο ισχυρό, δοκιμάσιμο και επεκτάσιμο, παρόλο που απαιτεί περισσότερο κώδικα από την αρχή.