في 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 الخاص بك.

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

في البداية، يمكن استخدام ميثود reset() المُدمجة في النموذج نفسه. هذه الطريقة تقوم بإعادة تعيين قيم النموذج وحالته إلى القيم الافتراضية، بما في ذلك حالة التحقق من الصحة. في سياق Angular، يُعد FormGroup هو الكائن الذي يُمثل النموذج.

على سبيل المثال، يُمكن تنفيذ الإعادة بالطريقة التالية:

typescriptCopy code
// قم بإستيراد FormGroup و FormBuilder من Angular Forms
import { FormGroup, FormBuilder } from '@angular/forms';

// في فئة الكومبوننت
export class YourComponent {
  // قم بإنشاء FormGroup باستخدام FormBuilder
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    // قم بتكوين النموذج وتحديد قواعد التحقق من الصحة
    this.myForm = this.fb.group({
      // تعريف حقول النموذج هنا
    });
  }

  // دالة تقوم بإعادة تعيين النموذج عند تقديم النموذج
  onSubmit() {
    // إعادة تعيين النموذج وحالة التحقق من الصحة
    this.myForm.reset();
  }
}

يمكن أيضًا استخدام خاصية pristine المرتبطة بالنموذج للتحقق من حالة ng-pristine. يُمكن استخدام هذه الخاصية للتحقق من حالة النموذج واتخاذ الإجراءات المناسبة.

typescriptCopy code
// داخل دالة onSubmit
onSubmit() {
  // إعادة تعيين النموذج
  this.myForm.reset();

  // التحقق من حالة ng-pristine
  if (this.myForm.pristine) {
    // قم باتخاذ إجراءات إضافية إذا لزم الأمر
  }
}

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

بالتأكيد، دعونا نعمق أكثر في موضوع إعادة تعيين حالة النموذج والتحقق من الصحة في Angular 2.

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

بعد إنشاء النموذج، يمكن تحديد قواعد التحقق من الصحة لكل حقل في النموذج باستخدام Validators المتوفرة في Angular. يمكن أيضًا استخدام FormArray للتعامل مع مجموعات من الحقول.

عند استخدام reset() لإعادة تعيين النموذج، يمكن تمرير قيم افتراضية إلى النموذج إذا كانت متاحة. على سبيل المثال:

typescriptCopy code
this.myForm.reset({
  // اعتبارًا من Angular 10، يمكن تحديد قيم افتراضية لكل حقل في النموذج
  fieldName: 'default value',
  anotherField: { nestedField: 'default nested value' },
});

بهذه الطريقة، يمكن تعيين قيم افتراضية لكل حقل في النموذج عند إعادة تعيينه.

يُفضل أيضًا استخدام patchValue() بدلاً من reset() إذا كنت ترغب في تحديث فقط بعض القيم في النموذج دون إعادة تعيين جميع القيم.

typescriptCopy code
this.myForm.patchValue({
  // تحديث قيمة حقل معين
  fieldName: 'new value',
});

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