Angular menawarkan dua pendekatan untuk borang. Borang berasaskan templat adalah mudah dan ditakrifkan dalam HTML; borang reaktif ditakrifkan dalam TypeScript dan menawarkan lebih banyak kawalan — lebih baik untuk borang yang kompleks, dinamik, atau banyak pengesahan.
// just import FormsModule; minimal TS
Submit
Struktur borang dan pengesahan terletak dalam templat melalui pengarah ngModel. Mudah untuk disediakan, tetapi model borang adalah tersirat dan lebih sukar untuk diuji/dimanipulasi secara program.
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>
Borang adalah objek eksplisit (FormGroup/FormControl) yang anda bina dalam TS. Ini menjadikannya boleh cerap, boleh diuji, dan mudah dimanipulasi (tambah/buang medan, bertindak balas terhadap perubahan melalui 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
Memilih pendekatan borang yang tepat penting untuk kebolehselenggaraan: berasaskan templat untuk borang pantas dan mudah; reaktif untuk apa-apa yang kompleks — wizard berbilang langkah, set medan dinamik, pengesahan silang medan, atau borang yang memerlukan ujian unit.
Model eksplisit dan boleh cerap borang reaktif secara amnya lebih disukai dalam aplikasi yang serius kerana ia lebih berkuasa, boleh diuji, dan dapat diskalakan, walaupun memerlukan lebih banyak kod pendahuluan.