49. التعامل مع أدوات التحقق غير المتزامنة

تُعد أدوات التحقق غير المتزامنة ضرورية عندما يتضمن التحقق استدعاءً للواجهة الخلفية (على سبيل المثال، التحقق مما إذا كان اسم المستخدم مستخدماً بالفعل في قاعدة البيانات). يتم تشغيل أدوات التحقق غير المتزامنة بعد تجاوز جميع أدوات التحقق المتزامنة.

هيكل أداة التحقق غير المتزامنة

تُرجع دالة أداة التحقق غير المتزامنة Observable أو Promise من ValidationErrors | null.

مثال: أداة التحقق من اسم المستخدم الفريد

تتحقق أداة التحقق هذه من الواجهة الخلفية عبر خدمة محقونة.

typescript // unique-username.validator.ts import { AbstractControl, ValidationErrors, AsyncValidatorFn } from '@angular/forms'; import { Observable, timer } from 'rxjs'; import { map, switchMap } from 'rxjs/operators'; import { UserService } from './user.service';

export function uniqueUsernameValidator(userService: UserService): AsyncValidatorFn { return (control: AbstractControl): Observable<ValidationErrors | null> => { // 1. الانتظار 500 مللي ثانية قبل التحقق لتقليل استدعاءات API (Debounce) return timer(500).pipe( switchMap(() => { if (!control.value) { return of(null); }

    // 2. استدعاء الخدمة (التي تُرجع Observable)
    return userService.checkUsernameExists(control.value).pipe(
      map(exists => {
        // 3. إرجاع خطأ إذا كان المستخدم موجوداً، وإلا null
        return exists ? { uniqueUsername: true } : null;
      })
    );
  })
);

}; }

تطبيق أداة التحقق غير المتزامنة

يتم تمرير أدوات التحقق غير المتزامنة كوسيط ثالث إلى مُنشئ FormControl.

typescript // في المكون: constructor(private fb: FormBuilder, private userService: UserService) { this.registerForm = this.fb.group({ username: ['', [Validators.required], // أدوات التحقق المتزامنة (الوسيط الثاني) [uniqueUsernameValidator(this.userService)] // أدوات التحقق غير المتزامنة (الوسيط الثالث) ] }); }

أثناء تشغيل التحقق غير المتزامن، ستكون حالة عنصر تحكم النموذج pending.