شعار زيفيرنت

ذكاء البيانات التوليدية

رمز

النماذج التفاعلية الزاويّة: إتقان التحقق من صحة النماذج الديناميكية وتفاعل المستخدم | كودمنتور

أعاد نشره أفلاطون
أعاد نشره أفلاطون

التاريخ:

المشاهدات: 41

المُقدّمة

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

جدول المحتويات

  1. فهم النماذج التفاعلية

    • ما هي النماذج التفاعلية؟
    • المزايا الرئيسية للنماذج التفاعلية

  2. البدء باستخدام النماذج التفاعلية

    • إعداد مشروع الزاوي
    • استيراد ReactiveFormsModule
    • إنشاء نموذج أساسي

  3. ضوابط النموذج والتحقق من صحتها

    • العمل مع عناصر التحكم في النماذج
    • تطبيق المدققين
    • عرض رسائل التحقق من الصحة

  4. حقول النموذج الديناميكي

    • توليد حقول النموذج بشكل ديناميكي
    • FormArray: إدارة صفائف عناصر التحكم في النماذج
    • إضافة وإزالة حقول النموذج

  5. تقديم النموذج ومعالجة البيانات

    • التعامل مع تقديم النموذج
    • الوصول إلى قيم النموذج
    • إعادة ضبط وتحديث بيانات النموذج

  6. التقنيات المتقدمة

    • التحقق من صحة المجال
    • أدوات التحقق المخصصة
    • التحقق غير المتزامن

  7. تفاعل المستخدم وردود الفعل في الوقت الحقيقي

    • التحقق المشروط
    • تحديث واجهة المستخدم بناءً على إدخال النموذج
    • توفير ردود فعل فورية

  8. أفضل الممارسات للاستخدام الفعال

    • فصل المخاوف
    • مبدأ MECE في تصميم النموذج
    • اعتبارات الوصول

  9. قسم الأسئلة الشائعة

    • أسئلة شائعة حول النماذج التفاعلية

فهم النماذج التفاعلية

ما هي النماذج التفاعلية؟

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

المزايا الرئيسية للنماذج التفاعلية

توفر النماذج التفاعلية العديد من المزايا مقارنة بطرق التعامل مع النماذج الأخرى:

  • التحكم الصريح: باستخدام النماذج التفاعلية، لديك سيطرة كاملة على عناصر التحكم في النماذج والتحقق من صحتها وإرسالها. وهذا يجعل من السهل تنفيذ سيناريوهات التحقق المعقدة والسلوكيات المخصصة.
  • هيكل النموذج الديناميكي: تتفوق النماذج التفاعلية في السيناريوهات التي تحتاج إلى إنشاء حقول النموذج ديناميكيًا، كما هو الحال عند التعامل مع الاستبيانات أو الاستطلاعات الديناميكية.
  • قابلية الاختبار: يؤدي فصل منطق النموذج عن القالب إلى جعل اختبار الوحدة أكثر وضوحًا، مما يسمح لك بكتابة حالات اختبار للتعليمات البرمجية المرتبطة بالنموذج.
  • التفاعلية: النماذج التفاعلية ترقى إلى مستوى أسمائها من خلال التفاعل مع التغييرات في قيم النموذج وحالات التحكم. يتيح ذلك التحديثات في الوقت الفعلي وتغييرات واجهة المستخدم الديناميكية بناءً على مدخلات المستخدم.

البدء باستخدام النماذج التفاعلية

إعداد مشروع الزاوي

قبل أن نتعمق في النماذج التفاعلية، فلنقم بإعداد مشروع Angular. إذا لم تكن قد قمت بالفعل بتثبيت Angular CLI، فيمكنك القيام بذلك باستخدام الأمر التالي:

npm install -g @angular/cli

إنشاء مشروع Angular جديد:

ng new ReactiveFormsDemo

انتقل إلى دليل المشروع:

cd ReactiveFormsDemo

استيراد ReactiveFormsModule

النماذج التفاعلية هي جزء من @angular/forms طَرد. لاستخدامها، تحتاج إلى استيراد ملف ReactiveFormsModule في وحدة التطبيق الخاصة بك. افتح ال app.module.ts ملف وإضافة الاستيراد التالي:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [
    
    ReactiveFormsModule,
  ],
  
})
export class AppModule { }

إنشاء نموذج أساسي

لنبدأ بإنشاء نموذج تفاعلي بسيط مع بعض عناصر التحكم الأساسية في النموذج. في ملف المكون الخاص بك (على سبيل المثال، app.component.ts) ، قم باستيراد الفئات الضرورية:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <label for="name">Name:</label>
      <input type="text" id="name" formControlName="name">

      <label for="email">Email:</label>
      <input type="email" id="email" formControlName="email">

      <button type="submit">Submit</button>
    </form>
  `,
})
export class AppComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      name: '',
      email: '',
    });
  }

  onSubmit() {
    console.log(this.myForm.value);
  }
}

في هذا المثال، نقوم بإنشاء نموذج يحتوي على عنصري تحكم في النموذج: name و email. formControlName السمة في HTML تربط عناصر التحكم في النموذج هذه بـ myForm مثيل FormGroup.

ضوابط النموذج والتحقق من صحتها

العمل مع عناصر التحكم في النماذج

عناصر التحكم في النموذج هي اللبنات الأساسية للنماذج التفاعلية. يتوافق كل حقل إدخال مع عنصر تحكم النموذج. للوصول إلى عناصر التحكم هذه والعمل معها، نستخدم FormGroup و FormControl الفئات التي تقدمها Angular's ReactiveFormsModule.

تطبيق المدققين

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

على سبيل المثال ، لجعل ملف name الحقل مطلوب، يمكنك تطبيق Validators.required المدقق:

import { Validators } from '@angular/forms';



this.myForm = this.fb.group({
  name: ['', Validators.required],
  email: '',
});

عرض رسائل التحقق من الصحة

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

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input type="text" id="name" formControlName="name">
  <div *ngIf="myForm.get('name').hasError('required') && myForm.get('name').touched">
    Name is required.
  </div>

  <label for="email">Email:</label>
  <input type="email" id="email" formControlName="email">
</form>

في هذا المثال ، *ngIf يتحقق التوجيه مما إذا كان name التحكم لديه required خطأ وتم لمسه من قبل المستخدم. إذا تم استيفاء كلا الشرطين، يتم عرض رسالة التحقق من الصحة.

حقول النموذج الديناميكي

توليد حقول النموذج بشكل ديناميكي

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

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

<form [formGroup]="addressForm">
  <div formArrayName="addresses">
    <div *ngFor="let addressGroup of addressGroups.controls; let i = index" [formGroupName]="i">
      <label>Street:</label>
      <input form

ControlName="street">

      <label>City:</label>
      <input formControlName="city">

      <button (click)="removeAddress(i)">Remove</button>
    </div>
  </div>

  <button (click)="addAddress()">Add Address</button>
</form>

هنا، و addressGroups يحتفظ FormArray بمثيلات FormGroup الفردية لكل عنوان. ال *ngFor تقوم الحلقة بإنشاء عناصر تحكم النموذج لكل عنوان بشكل ديناميكي.

FormArray: إدارة صفائف عناصر التحكم في النماذج

• FormArray الطبقة هي نوع متخصص من FormGroup الذي يدير مجموعة من FormControl, FormGroup، أو غيرها من FormArray الحالات. في المثال أعلاه، addresses يحمل FormArray عدة FormGroup الحالات، كل منها يمثل عنوانا.

لخلق FormArray، يمكنك استخدام ال FormBuilder:

this.addressForm = this.fb.group({
  addresses: this.fb.array([]),
});

إضافة وإزالة حقول النموذج

تتضمن إضافة حقول النموذج الديناميكي وإزالتها معالجة ملف FormArray. لإضافة عنوان جديد، يمكنك استخدام push() الأسلوب:

addAddress() {
  const addressGroup = this.fb.group({
    street: '',
    city: '',
  });
  this.addresses.push(addressGroup);
}

تتطلب إزالة عنوان استخدام removeAt() الأسلوب:

removeAddress(index: number) {
  this.addresses.removeAt(index);
}

تقديم النموذج ومعالجة البيانات

التعامل مع تقديم النموذج

توفر النماذج التفاعلية طريقة مباشرة للتعامل مع عمليات إرسال النماذج باستخدام (ngSubmit) ملزمة الحدث. عند إرسال النموذج، يتم استدعاء الوظيفة المرتبطة، مما يسمح لك بمعالجة بيانات النموذج.

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  

  <button type="submit">Submit</button>
</form>

في المكون الخاص بك، حدد onSubmit() وظيفة:

onSubmit() {
  if (this.myForm.valid) {
    
  }
}

الوصول إلى قيم النموذج

للوصول إلى القيم التي تم إدخالها في عناصر التحكم بالنموذج، يمكنك ببساطة استخدام .value ممتلكات FormGroup or FormControl. ومع ذلك، من المهم ملاحظة أن هذه الخاصية تُرجع كائنًا بمفاتيح تتوافق مع أسماء عناصر التحكم والقيم التي تمثل مدخلات المستخدم.

onSubmit() {
  if (this.myForm.valid) {
    const formData = this.myForm.value;
    
  }
}

إعادة ضبط وتحديث بيانات النموذج

تعد إعادة تعيين النموذج إلى حالته الأولية مفيدًا بعد الإرسال الناجح أو عندما يقوم المستخدم بإلغاء العملية. لإعادة ضبط النموذج، استخدم reset() الأسلوب:

resetForm() {
  this.myForm.reset();
}

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

resetFormToDefault() {
  this.myForm.reset({ name: '', email: '' });
}

لتحديث قيم النموذج برمجياً، استخدم الأمر patchValue() or setValue() أساليب:

updateFormValues() {
  this.myForm.patchValue({ name: 'John' });
}

التقنيات المتقدمة

التحقق من صحة المجال

يتضمن التحقق من صحة الحقول التحقق من صحة حقول متعددة معًا، وغالبًا ما يكون ذلك من خلال علاقات معقدة. تدعم النماذج التفاعلية هذا النوع من التحقق من الصحة من خلال توفير طريقة لتنفيذ أدوات التحقق المخصصة التي تأخذ في الاعتبار حقولًا متعددة.

const passwordValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
  const password = control.get('password');
  const confirmPassword = control.get('confirmPassword');

  if (!password || !confirmPassword) {
    return null;
  }

  return password.value === confirmPassword.value ? null : { passwordsNotMatch: true };
};

this.myForm = this.fb.group({
  
  password: '',
  confirmPassword: '',
}, { validator: passwordValidator });

في هذا المثال ، passwordValidator يتحقق من تطابق حقول كلمة المرور وتأكيد كلمة المرور.

أدوات التحقق المخصصة

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

const customValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
  const value = control.value;
  if (value && value.includes('example')) {
    return { containsExample: true };
  }
  return null;
};

this.myForm = this.fb.group({
  
  customField: ['', customValidator],
});

التحقق غير المتزامن

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

const asyncValidator: AsyncValidatorFn = (control: AbstractControl): Observable<ValidationErrors | null> => {
  return someAsyncCheck(control.value).pipe(
    map(result => result ? null : { notAvailable: true }),
    catchError(() => null) 
  );
};

this.myForm = this.fb.group({
  
  username: ['', [], [asyncValidator]],
});

تفاعل المستخدم وردود الفعل في الوقت الحقيقي

التحقق المشروط

تسمح لك النماذج التفاعلية بتطبيق قواعد التحقق بشكل مشروط بناءً على إدخال المستخدم. يعد هذا مفيدًا بشكل خاص عندما تحتاج إلى تغيير متطلبات التحقق من الصحة ديناميكيًا.

this.myForm = this.fb.group({
  
  age: ['', [Validators.required]],
  hasLicense: [false],
});


this.myForm.get('hasLicense').valueChanges.subscribe(hasLicense => {
  const ageControl = this.myForm.get('age');
  if (hasLicense) {
    ageControl.setValidators([Validators.required, Validators.min(18)]);
  } else {
    ageControl.clearValidators();
  }
  ageControl.updateValueAndValidity();
});

في هذا المثال ، age يصبح الحقل مطلوبًا فقط إذا أشار المستخدم إلى أن لديه ترخيصًا.

تحديث واجهة المستخدم بناءً على إدخال النموذج

تسمح لك النماذج التفاعلية بالتفاعل مع تغييرات التحكم في النموذج وتحديث واجهة المستخدم وفقًا لذلك. يمكنك استخدام ال valueChanges يمكن ملاحظتها للاستماع إلى التغييرات في عناصر التحكم في النموذج.

this.myForm.get('email').valueChanges.subscribe(newValue => {
  
});

تعتبر هذه التقنية مفيدة بشكل خاص لتوفير تعليقات في الوقت الفعلي للمستخدمين أثناء تفاعلهم مع النموذج.

توفير ردود فعل فورية

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

this.myForm = this.fb.group({
  
  email: ['', [Validators.required, Validators.email]],
});


this.myForm.get('email').valueChanges.subscribe(() => {
  const emailControl = this.myForm.get('email');
  if (emailControl.invalid && emailControl.touched) {
    this.emailError = 'Invalid email format';
  } else {
    this.emailError = '';
  }
});

في هذا المثال ، emailError المتغير يحمل رسالة التحقق من الصحة، والتي يتم تحديثها

بناءً على صلاحية التحكم في البريد الإلكتروني وتفاعل المستخدم.

أفضل الممارسات للاستخدام الفعال

فصل المخاوف

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

مبدأ MECE في تصميم النموذج

MECE (الحصري المتبادل والشامل بشكل جماعي) هو مبدأ يستخدم غالبًا في حل المشكلات وإدارة المشاريع. قم بتطبيق هذا المبدأ على تصميم النموذج من خلال التأكد من أن عناصر التحكم في النموذج تغطي جميع السيناريوهات المحتملة دون تداخل أو ترك فجوات.

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

اعتبارات الوصول

أثناء بناء النماذج، انتبه بشكل خاص إلى إمكانية الوصول. تأكد من أن النماذج الخاصة بك قابلة للاستخدام من قبل الأشخاص ذوي الإعاقة باستخدام دلالات HTML والتسميات وسمات ARIA المناسبة. استخدم التباين العالي وقدم تعليمات واضحة لتحسين تجربة المستخدم بشكل عام.

قسم الأسئلة الشائعة

س1: هل يمكنني مزج النماذج التفاعلية والنماذج المبنية على القوالب في نفس التطبيق؟

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

س2: هل النماذج التفاعلية مناسبة للنماذج الصغيرة والبسيطة؟

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

س3: كيف يمكنني التعامل مع العمليات غير المتزامنة في إرسال النموذج؟

للتعامل مع العمليات غير المتزامنة أثناء إرسال النموذج، يمكنك استخدام switchMap عامل من RxJS لتسلسل عملياتك التي يمكن ملاحظتها. يتيح لك هذا إجراء مكالمات غير متزامنة ومتابعة إرسال النموذج فقط عند اكتمال عمليات المزامنة.

import { switchMap } from 'rxjs/operators';



onSubmit() {
  if (this.myForm.valid) {
    this.someAsyncOperation()
      .pipe(
        switchMap(result => this.submitForm(result))
      )
      .subscribe(() => {
        
      });
  }
}

وفي الختام

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

بقعة_صورة

أحدث المعلومات الاستخباراتية

بقعة_صورة

حقوق النشر @ 2024 Plato Technologies Inc.