Angular oferuje dwa podejścia do formularzy. Formularze sterowane szablonem są proste i zdefiniowane w HTML; formularze reaktywne są zdefiniowane w TypeScript i oferują większą kontrolę — lepsze dla złożonych, dynamicznych lub intensywnie walidowanych formularzy.
// 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>
Struktura formularza i walidacja znajdują się w szablonie poprzez dyrektywy ngModel. Proste w konfiguracji, ale model formularza jest niejawny i trudniejszy do testowania/manipulowania programistycznie.
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>
Formularz jest obiektem jawnym (FormGroup/FormControl), który tworzysz w TS. To czyni go obserwowalnym, testowalnym i łatwym do manipulowania (dodawanie/usuwanie pól, reagowanie na zmiany poprzez 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
Wybór odpowiedniego podejścia do formularza ma znaczenie dla utrzymywalności: sterowane szablonem dla szybkich, prostych formularzy; reaktywne dla wszystkiego, co jest złożone — wieloetapowe kreatoryami, dynamiczne zestawy pól, walidacja między polami lub formularze wymagające testów jednostkowych.
Model jawny i obserwowalny formularzy reaktywnych jest generalnie preferowany w poważnych aplikacjach, ponieważ jest bardziej wydajny, testowalny i skalowalny, chociaż wymaga więcej kodu na początek.
Biblioteka pytań rekrutacyjnych IT ze szczegółowymi odpowiedziami — od Juniora do Seniora.
Wesprzyj