Angular inatoa njia mbili kwa fomu. Fomu za kusukumwa na template ni rahisi na zinafafanuliwa katika HTML; fomu za zinazobadilika zinafafanuliwa katika TypeScript na kutoa udhibiti zaidi — nzuri zaidi kwa fomu changamano, dinamiki, au zilizotekelezwa kwa nguvu.
// 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>
Mundo wa fomu na uhalali wanakaa katika template kupitia direktiba za ngModel. Rahisi kuandaa, lakini modeli ya fomu ni nyingi na ngumu kutekeleza/kumanipulata kwa njia ya programu.
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>
Formu ni kitu kama kiko wazi (FormGroup/FormControl) unachojengea katika TS. Hii inayafanya yanayozingatiwa, yanayotestable, na rahisi kumanipulata (kuongeza/kuondoa sehemu, kujibu kwa mabadiliko kupitia 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
Kuchagua njia sahihi ya fomu ni muhimu kwa ukusanyaji: fomu zilizosukumwa na template kwa fomu haraka, rahisi; zinazobadilika kwa kitu chochote changamano — viongezi vya hatua nyingi, seti za sehemu za nguvu, uhalali wa kati-sehemu, au fomu zinazoitaji majaribio ya vitengo.
Modeli ya kazi, inayotazamia fomu zinazobadilika inaturahisua katika programu kubwa kwa sababu ni kwa nguvu zaidi, inayotestable, na inayoweza kuongezwa, hata kama inahitaji msimbo zaidi wa awali.
Maktaba ya maswali ya mahojiano ya IT yenye majibu ya kina — kutoka Junior hadi Senior.
Changia