يوفر Angular طريقتين للنماذج. نماذج التحكم بالقالب بسيطة وتُعرّف في HTML؛ نماذج التفاعل تُعرّف في TypeScript وتوفر تحكماً أكبر — أفضل للنماذج المعقدة أو الديناميكية أو التي تحتاج للتحقق الشامل.
// just import FormsModule; minimal TS
Submit
تعيش بنية النموذج والتحقق من الصحة في القالب عبر توجيهات ngModel. سهل الإعداد، لكن نموذج النموذج ضمني وأصعب في الاختبار أو التعامل معه برمجياً.
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>
النموذج هو كائن صريح (FormGroup/FormControl) تبنيه في TS. هذا يجعله قابلاً للمراقبة واختباراً وسهل التعامل معه (إضافة/إزالة الحقول، الاستجابة للتغييرات عبر 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
اختيار الطريقة الصحيحة للنموذج مهم للصيانة: التحكم بالقالب للنماذج السريعة والبسيطة؛ التفاعل لأي شيء معقد — معالجات متعددة الخطوات أو مجموعات الحقول الديناميكية أو التحقق من صحة الحقول المتقاطعة أو النماذج التي تحتاج لاختبارات وحدات.
نموذج التفاعل الصريح والقابل للمراقبة يُفضل عموماً في التطبيقات الجادة لأنه أقوى واختباراً وقابلاً للتوسع، حتى لو كان يتطلب المزيد من الكود في البداية.