Angular nudi dva pristupa za obrasce. Template-driven obrasci su jednostavni i definirani u HTML-u; reactive obrasci su definirani u TypeScript-u i pružaju više kontrole — bolji su za složene, dinamične ili jako validirane obrasce.
// just import FormsModule; minimal TS
Submit
Struktura obrasca i validacija žive u predlošcu putem ngModel direktiva. Jednostavno je postaviti, ali je model obrasca implicitno dan i teže ga je programski testirati/manipulirati.
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>
Obrazac je eksplicitni objekt (FormGroup/FormControl) koji gradite u TS-u. To ga čini osmatrljivim, testabilnim i lako manipulabilnim (dodajte/uklonite polja, reagirajte na promjene putem 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
Odabir pravog pristupa obrascu važan je za održivost: template-driven za brze, jednostavne obrasce; reactive za bilo šta kompleksnu — čarobnjaaci s više koraka, dinamički skupovi polja, validacija između polja, ili obrasci koji trebaju jedinične testove.
Eksplicitni, osmatrljivi model reaktivnih obrazaca općenito je poželjno u ozbiljnim aplikacijama jer je moćniji, testabilniji i skalabilniji, čak i ako zahtijeva više početnog koda.