Angular Forms

في 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 والذي يتضمن مفهومًا أساسيًا للمُحقق الرقمي الذي يعتمد على القالب مع التحقق الفاصل زمني (async validator).

أولاً وقبل الدخول في التفاصيل، يجدر بنا أن نلاحظ أنك تستخدم نموذجًا يعتمد على القالب في Angular 2، وقد قمت بتعريف مُحقق رقمي فاصل زمني (async validator) لفحص صحة البريد الإلكتروني والتحقق مما إذا كان قيد الاستخدام بالفعل. تم تحقيق الجزء الأول من التحقق بنجاح باستخدام التعبير العادي لفحص البريد الإلكتروني. ومع ذلك، يبدو أن جزء الفحص الفاصل زمني للتحقق من استخدام البريد الإلكتروني لا يؤدي عمله كما هو متوقع.

يجب علينا التفحص الدقيق لرمزك لفهم ما إذا كان هناك أخطاء تقنية أم لا. يتعين علينا أن نأخذ في اعتبارنا الجوانب التالية:

1. استخدام مكتبة Angular 2: يجب التأكد من أنك تستخدم إصدارًا صحيحًا من Angular 2 وأن توجد كل الوحدات اللازمة مثل Directive و NG_VALIDATORS.

2. التصدير الصحيح: يجب التحقق من أنك تقوم بتصدير فئة EmailValidator كمُحقق رقمي. يتم ذلك من خلال استخدام provide(NG_VALIDATORS, {useExisting: EmailValidator, multi: true}).

3. التعامل مع الوعد (Promise): يبدو أن قسم الوعد الخاص بفحص استخدام البريد الإلكتروني لا يعمل بشكل صحيح. يمكن أن يكون هناك مشكلة في تنفيذ الوعد أو في كيفية التعامل مع القيمة المُسترجعة من getUserNames، وربما يكون هناك تأخير في الوعد.

4. استخدام AsyncValidatorFn: يفضل استخدام AsyncValidatorFn بدلاً من استخدام Promise مباشرة. هذا يسهل التعامل مع الفحوصات الفاصلة زمنيًا.

5. التحقق من السجلات: يجب التحقق من سجلات الخطأ في وحدة التحكم للتأكد من عدم وجود أخطاء متعلقة بتنفيذ المُحقق الرقمي الفاصل زمني.

6. التحقق من واجهة محقق الفاصل الزمني: يجب التحقق من أن فئة EmailValidator تنفذ واجهة AsyncValidator.

7. تحديث Angular: قد تكون مشكلتك مصطلحة وتم حلها في إصدارات أحدث من Angular.

8. تفعيل مستوى التسجيل (Logging): استخدم تسجيل الأخطاء لتحديد مكان الفشل.

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

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

التصدير الصحيح:

تأكد من أنك قمت بتصدير فئة EmailValidator كمُحقق رقمي بشكل صحيح. في قطعة الكود التي قدمتها، يجب أن يكون لديك:

typescriptCopy code
@Directive({
  selector: '[asyncEmailValidator]',
  providers: [provide(NG_VALIDATORS, {useExisting: EmailValidator, multi: true}), AccountService]
})
export class EmailValidator implements Validator, AsyncValidator {
  // ... الكود الباقي
}

تنفيذ AsyncValidator:

تأكد من أن EmailValidator تنفذ واجهة AsyncValidator بالإضافة إلى Validator. يمكنك تغيير تعريف الفئة كما يلي:

typescriptCopy code
export class EmailValidator implements Validator, AsyncValidator {
  // ... الكود الباقي
}

استخدام AsyncValidatorFn:

يفضل استخدام AsyncValidatorFn لتسهيل التعامل مع فحوص الفاصل الزمني. يمكنك تعريف وظيفة فحص فاصل الزمن كالتالي:

typescriptCopy code
export function asyncEmailValidator(accountService: AccountService): AsyncValidatorFn {
  return (c: AbstractControl): Observable<ValidationErrors | null> => {
    // قم بتنفيذ الكود الخاص بك هنا
  };
}

وثم استخدامها عند تقديم المُحقق الفاصل الزمني في المستوى القالبي:

htmlCopy code
<input type="text" ngControl="email" [(ngModel)]="model.applicant.contact.email" #email="ngForm" required [asyncValidator]="asyncEmailValidator(accountService)">

التعامل مع Observable:

عند استخدام فحص فاصل الزمن كوحدة نظام الوحدات القابلة للرصد (Observable)، تأكد من أن تتعامل بشكل صحيح مع قيمة الرصد المُسترجعة من getUserNames. يمكن أن تكون الطريقة الأمثل هي استخدام switchMap للتبديل إلى قيمة Observable جديدة:

typescriptCopy code
return this.accountService.getUserNames(c.value).pipe(
  switchMap(res => {
    if (res === true) {
      return of(null);
    } else {
      return of({ validateEmailTaken: { valid: false } });
    }
  })
);

التحقق من السجلات:

فحص سجلات الخطأ في وحدة التحكم (Console) للتحقق من وجود أخطاء تنفيذ. يمكنك استخدام console.log لإرجاع السجلات في نقاط محددة في كودك لمعرفة مكان الفشل.

التحديث إلى أحدث إصدار من Angular:

تأكد من أنك تستخدم إصدارًا مستقرًا ومحدثًا لـ Angular، حيث قد تكون المشكلة قد تم حلها في إصدارات أحدث.

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