Angular oferă două abordări pentru formularele. Formularele bazate pe template sunt simple și definite în HTML; formularele reactive sunt definite în TypeScript și oferă mai mult control — mai bune pentru formularele complexe, dinamice sau cu validare intensivă.
// just import FormsModule; minimal TS
Submit
Structura formularului și validarea trăiesc în template-ul prin directivele ngModel. Ușor de configurat, dar modelul formularului este implicit și mai greu de testat/manipulat programatic.
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>
Formularul este un obiect explicit (FormGroup/FormControl) pe care îl construiești în TS. Aceasta îl face observabil, testabil și ușor de manipulat (adăugare/ștergere de câmpuri, reacție la modificări 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
Alegerea abordării corecte pentru formular contează pentru menținere: bazate pe template pentru formularele rapide și simple; reactive pentru orice complex — asistentul multietapă, seturi de câmpuri dinamice, validare între câmpuri, sau formularele care necesită teste unitare.
Modelul explicit și observabil al formularelor reactive este în general preferat în aplicațiile serioase deoarece este mai puternic, testabil și scalabil, chiar dacă necesită mai mult cod la început.