استخدام Reactive Forms في Angular

في Angular 2 RC4، كان هناك تحذير في وحدة التحكم النموذجية تشير إلى أنك تستخدم الوحدة القديمة للنماذج والتي ستتطلب الموافقة عليها في الإصدار القادم، وسيتم إزالتها في نهاية المطاف لصالح الوحدة الجديدة للنماذج. في الواقع، تم إزالة الوحدة القديمة في إصدارات لاحقة من Angular.

الوحدة الجديدة للنماذج في Angular تعرف بـ Reactive Forms وتوفر طريقة أكثر إرشادًا وتحكمًا في العمل مع النماذج. يمكنك تعريف نموذجك باستخدام FormBuilder بدلاً من استخدام FORM_DIRECTIVES و REACTIVE_FORM_DIRECTIVES.

لتعديل مكونك لاستخدام الوحدة الجديدة للنماذج، قم بتعديل الواردة التالية في مكونك:

typescriptCopy code
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
    selector: "hh-topbar",
    moduleId: module.id,
    templateUrl: "topBar.component.html",
    // directives: [HHPagerComponent, FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES] // لا تحتاج إلى تضمين هذه الدلائل بعد الآن
})

export class HHTopBarComponent implements OnInit {
    ...
    private filterForm: FormGroup;
    private title$: Observable<string>;

    constructor(private formBuilder: FormBuilder) {}

    public ngOnInit(): void {
        this.filterForm = this.formBuilder.group({
            "title": [this.info.filters.searchFileName]
        });

        this.title$ = this.filterForm.get("title").valueChanges;
        this.title$.subscribe(val => {
            this.info.filters.searchFileName = val;
            this.filterChanged.emit(this.info.filters);
        });
    }
}

تحتاج أيضًا إلى تعديل القالب الخاص بك لاستخدام الطريقة الجديدة:

htmlCopy code
<form [formGroup]="filterForm">
    <div>
        <label for="title">Titlelabel>
        <input formControlName="title" id="title" />
    div>
form>

من المهم أن تلاحظ أن formControlName تستخدم بدلاً من [formControl] وget تستخدم بدلاً من controls.

بالتأكيد! الوحدة الجديدة للنماذج في Angular، والتي تُعرف أيضًا باسم Reactive Forms، تقدم ميزات أكثر تفصيلاً وتحكمًا عند العمل مع النماذج في تطبيق Angular.

تُستخدم Reactive Forms لإنشاء نماذج تستجيب بشكل ديناميكي إلى التغييرات التي يقوم بها المستخدمون، وتُمكّنك من إجراء التحقق من الصحة (validation) والتعامل مع التغييرات بشكل مباشر.

بدلاً من الاعتماد على توجيهات FORM_DIRECTIVES و REACTIVE_FORM_DIRECTIVES، يمكنك الآن استخدام FormGroup و FormBuilder من حزمة @angular/forms.

FormGroup هو مجموعة من العناصر الفردية في النموذج ويمكنك التحقق من صحتها وإدارتها كمجموعة. FormBuilder يُستخدم لبناء نماذج Angular بشكل أسهل وأكثر تنظيمًا.

بالنسبة للتحقق من الصحة، يمكنك تعريف قواعد التحقق من الصحة في نموذجك باستخدام Validators من @angular/forms، مثل Validators.required لجعل حقل إلزامي.

عند استخدام Reactive Forms، يمكنك أيضًا الاستفادة من ميزات إضافية مثل تتبع حالة النموذج بالكامل (pristine, dirty, touched)، وتعيين قيم افتراضية، وإدارة الحالة المتعلقة بالتحقق من الصحة بشكل مرن.

باستخدام Reactive Forms، يمكنك بناء تجربة مستخدم متقدمة وفعالة عند التعامل مع النماذج في تطبيق Angular الخاص بك.