تحليل موجز للأشكال سريعة الاستجابة في التعلم الزاوي

كيفية البدء بسرعة مع VUE3.0: الدخول للتعرف على

النماذج سريعة الاستجابة

يوفر Angular طريقتين مختلفتين للتعامل مع إدخال المستخدم من خلال النماذج:响应式表单模板驱动表单. [توصية البرنامج التعليمي ذات الصلة: "Angular Tutorial"]

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

يتم تقديم النماذج المستجيبة فقط هنا بالنسبة للنماذج المبنية على القوالب، يرجى الرجوع إلى الموقع الرسمي:

https://angular.cn/guide/forms-overview#setup-in-template-driven-forms

قم بتسجيل وحدة النموذج المستجيب ReactiveFormsModule على مستوى العالم.

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

/***** app.module.ts *****/
استيراد { ReactiveFormsModule } من '@angular/forms'؛

@NgModule({
  الواردات: [
    // واردات أخرى...
    ReactiveFormsModule
  ]،
})
فئة التصدير AppModule { }

إضافة عنصر تحكم النموذج الأساسي FormControl

هناك ثلاث خطوات لاستخدام عنصر التحكم في النموذج.

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

• قم بإنشاء مثيل FormControl جديد واحفظه في المكون.

• قم بتسجيل FormControl هذا في القالب.

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

/***** test.component.ts *****/
استيراد {المكون} من '@angular/core'؛
استيراد {FormControl} من '@angular/forms'؛

@عنصر({
  المحدد: "محرر اسم التطبيق"،
  templateUrl: './name-editor.component.html'،
  styleUrls: ['./name-editor.component.css']
})
فئة التصدير TestComponent {
	// يمكنك تعيين القيمة الأولية في مُنشئ FormControl، في هذا المثال هو اسم السلسلة الفارغة = new FormControl('');
}

ثم قم بتسجيل عنصر التحكم في القالب كما يلي: test.component.html

<!-- test.component.html -->
<التسمية>
  الاسم: <نوع الإدخال = "نص" [formControl] = "الاسم">
</التسمية>
<!-- إذا تغيرت القيمة المدخلة في الإدخال، فستتغير القيمة المعروضة هنا أيضًا -->
<p>الاسم: {{ name.value }}</p>

للتعرف على خصائص وأساليب FormControl الأخرى، يرجى الرجوع إلى الدليل المرجعي لواجهة برمجة التطبيقات (API) .

https://angular.cn/api/forms/FormControl#formcontrol

يقوم بتجميع عناصر التحكم في النموذج في FormGroup،

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

راجع المثال التوضيحي التالي: test.component.ts , test.component.html

import { Component } from '@angular/core';
استيراد {FormControl، FormGroup، Validators } من '@angular/forms'

@عنصر({
  المحدد: "اختبار التطبيق"،
  templateUrl: './test.component.html'،
  styleUrls: ['./test.component.css']
})
فئة التصدير TestComponent تنفذ OnInit {
    منشئ () {}

    ProfileForm = مجموعة نماذج جديدة({
      الاسم الأول: FormControl الجديد('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')])،
      الاسم الأخير: FormControl جديد (''، Validators.required)،
    });
	
	على إرسال () {
		// تحقق من قيم كل حقل في مجموعة التحكم console.log(this.profileForm.value)
    }
}

<!-- ProfileForm ترتبط مجموعة النماذج هذه بعنصر النموذج من خلال توجيه FormGroup، مما يؤدي إلى إنشاء طبقة اتصال بين النموذج ومربع الإدخال في النموذج -->
<!-- يستمع توجيه FormGroup أيضًا إلى حدث الإرسال المنبعث من عنصر النموذج ويصدر حدث ngSubmit، مما يسمح لك بربط وظيفة رد الاتصال. -->
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
    <التسمية>
<!-- يربط توجيه FormControlName كل مربع إدخال بعنصر تحكم النموذج FormControl المحدد في FormGroup. ستتواصل عناصر التحكم في النموذج هذه مع العناصر المقابلة -->
      الاسم الأول: <نوع الإدخال = "نص" formControlName = "الاسم الأول">
    </التسمية>
    <التسمية>
      الاسم الأخير: <input type = "text" formControlName = "lastName">
    </التسمية>
    <button type="submit" [disabled]="!profileForm.valid">إرسال</button>
  </النموذج>

  <p>{{ ProfileForm.value }}</p>
  <!-- حالة مجموعة التحكم: غير صالحة أو صالحة -->
  <p>{{ ProfileForm.status }}</p>	
  <!-- ما إذا كانت القيمة التي أدخلتها مجموعة التحكم هي قيمة صالحة: صواب أم خطأ-->
  <p>{{ ProfileForm.valid }}</p>
  <!-- ما إذا كان سيتم التعطيل: صحيح أم خطأ-->
  <p>{{ ProfileForm.disabled }}</p>

للتعرف على خصائص وأساليب FormGroup الأخرى، يرجى الرجوع إلى الدليل المرجعي لواجهة برمجة التطبيقات (API) .

https://angular.cn/api/forms/FormGroup#formgroup

يستخدم خدمة FormBuilder الأبسط لإنشاء مثيلات التحكم

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

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

تحتوي خدمة FormBuilder على ثلاث طرق: control() و group() و array() . هذه الطرق هي طرق مصنعية لإنشاء FormControl و FormGroup و FormArray على التوالي في فئة المكون.

راجع المثال التالي: test.component.ts

import { Component } from '@angular/core';
// 1. استيراد FormBuilder
استيراد { FormBuilder، Validators } من '@angular/forms'؛

@عنصر({
  المحدد: "اختبار التطبيق"،
  templateUrl: './test.component.html'،
  styleUrls: ['./test.component.css']
})
فئة التصدير TestComponent {
	// 2. أدخل مُنشئ خدمة FormBuilder(private fb: FormBuilder) { }
    ngOnInit() { }

    نموذج الملف = this.fb.group({
      الاسم الأول: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9]*')]],
      الاسم الأخير: [''، Validators.required]،
    });
    // يعادل // ProfileForm = new FormGroup({
    // الاسم الأول: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')])،
    // الاسم الأخير: FormControl الجديد (''، Validators.required)،
    // });

    على إرسال () {
      console.log(this.profileForm.value)
      console.log(this.profileForm)
    }
}

بالمقارنة، يمكن العثور على أن استخدام خدمة FormBuilder يمكن أن يؤدي بسهولة أكبر إلى إنشاء FormControl و FormGroup و FormArray دون الحاجة إلى إنشاء مثيل new يدويًا في كل مرة.

أدوات التحقق من صحة النماذج

للحصول على قائمة كاملة بواجهة برمجة التطبيقات (API) الخاصة بأدوات Validators ، راجع دليل واجهة برمجة التطبيقات (API)

https://angular.cn/api/forms/Validators.

يمكن أن تكون وظيفة أداة التحقق ( Validators ) وظيفة متزامنة أو وظيفة غير متزامنة.

• أدوات التحقق المتزامنة: تقبل هذه الوظائف المتزامنة نسخة تحكم وترجع مجموعة من أخطاء التحقق من الصحة أو فارغة. يمكنك تمريرها كمعلمة ثانية إلى المُنشئ عند إنشاء نموذج FormControl .
• أدوات التحقق غير المتزامنة: تقبل هذه الوظائف غير المتزامنة نسخة تحكم وترجع Promise أو Observable ، والتي تُصدر فيما بعد مجموعة من أخطاء التحقق أو تكون خالية. يمكن تمريرها كمعلمة ثالثة عند إنشاء FormControl .

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

API فئة أدوات التحقق من الصحة

https://angular.cn/api/forms/Validators

فئة Validators {
  static min(min: number): ValidatorFn // الحد الأدنى للقيمة المسموح بإدخالها static max(max: number): ValidatorFn // الحد الأقصى للقيمة static المطلوبة(control: AbstractControl): ValidationErrors null // ما إذا كانت مطلوبة static مطلوب True (التحكم: AbstractControl): ValidationErrors null |
  البريد الإلكتروني الثابت (التحكم: AbstractControl): ValidationErrors |.null // ما إذا كان تنسيق البريد الإلكتروني static minLength(minLength: number): ValidatorFn // الحد الأدنى للطول static maxLength(maxLength: number): ValidatorFn // الحد الأقصى للطول static Pattern(pattern: string |.RegExp): ValidatorFn // تطابق عادي static nullValidator(control: AbstractControl): ValidationErrors null // لا تفعل شيئًا static compose(validators: ValidatorFn[]): ValidatorFn null
  static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn null |
}

وظيفة أداة التحقق المضمنة

import { Validators } من '@angular/forms'

عند إنشاء عنصر تحكم FormControl

...
ngOnInit (): باطل {
  this.heroForm = new FormGroup({
  // إنشاء مثيل لاسم عنصر التحكم FormControl: new FormControl(this.hero.name, [
      Validators.required، // التحقق من الصحة، مطلوب Validators.minLength(4)، // الطول لا يقل عن 4
      ممنوعNameValidator(/bob/i) // مُدقق مخصص])،
    تغيير Ego: FormControl الجديد (this.hero.alterEgo)،
    الطاقة: FormControl الجديد (this.hero.power، Validators.required)
  });
}
الحصول على الاسم () {إرجاع this.heroForm.get('name' });

get power() { return this.heroForm.get('power' }

مدقق مخصص

للاطلاع على محتوى المدقق المخصص، يرجى الرجوع إلى دليل واجهة برمجة التطبيقات

https://angular.cn/guide/form-validation

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

• أضف أدوات التحقق المخصصة في النماذج سريعة الاستجابة. في قسم أداة التحقق المضمنة أعلاه، توجد وظيفة forbiddenNameValidator كما يلي:

  import { Validators } from '@angular/forms';
  ...
  ngOnInit (): باطل {
    this.heroForm = new FormGroup({
      الاسم: FormControl الجديد (this.hero.name، [
        المدققون.مطلوبون،
        Validators.minLength(4),
        // 1. إضافة مدقق مخصص ممنوعNameValidator(/bob/i)
      ])
    });
  }
  // 2. قم بتنفيذ مدقق مخصص تتمثل وظيفته في حظر إدخال القيم باستخدام وظيفة تصدير سلسلة bob ممنوعNameValidator(nameRe: RegExp): ValidatorFn {
    العودة (التحكم: AbstractControl): ValidationErrors |.
      const ممنوع = nameRe.test(control.value);
      // 3. قم بإرجاع قيمة فارغة عندما تكون صالحة، أو قم بإرجاع كائن خطأ التحقق عندما تكون غير صالحة returnminating ? {forbiddenName: {value: control.value}} : null;
    };
  }

  يقوم المدقق بإرجاع null إذا كانت القيمة صالحة، أو验证错误对象إذا كانت غير صالحة. عادةً ما تحتوي كائنات خطأ المصادقة على سمة تسمى مفتاح المصادقة ( forbiddenName ). قيمته عبارة عن قاموس عشوائي يمكنك استخدامه لإدراج رسائل الخطأ ({name}).

• قم بإضافة أدوات التحقق المخصصة في النماذج المعتمدة على القالب. لإضافة توجيه إلى القالب، يحتوي التوجيه على وظيفة validator . وفي الوقت نفسه، يحتاج هذا التوجيه إلى تسجيل نفسه كموفر لـ NG_VALIDATORS . كما هو موضح أدناه:

  // 1. استيراد الفئات ذات الصلة import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
  استيراد {Input} من "@angular/core"
  
  @التوجيه({
    المحدد: '[appForbiddenName]'،
    // 2. سجل كموفر لموفري الرموز المميزة NG_VALIDATORS: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
  })
  فئة التصدير ForbiddenValidatorDirective تنفذ Validator {
    @Input('appForbiddenName') اسم محظور = '';
    // 3. قم بتنفيذ واجهة المدقق، أي تنفيذ وظيفة التحقق من الصحة validate(control: AbstractControl): ValidationErrors null { |
    	// إرجاع قيمة خالية عندما تكون صالحة، أو إرجاع كائن خطأ التحقق من الصحة عندما يكون غير صالح return this.forbiddenName ?
                                : باطل؛
    }
  }
  // 4. وظيفة التصدير المخصصة لوظيفة التحقق ممنوعNameValidator(nameRe: RegExp): ValidatorFn {
    العودة (التحكم: AbstractControl): ValidationErrors |.
      const ممنوع = nameRe.test(control.value);
      // 3. قم بإرجاع قيمة فارغة عندما تكون صالحة، أو قم بإرجاع كائن خطأ التحقق عندما تكون غير صالحة returnminating ? {forbiddenName: {value: control.value}} : null;
    };
  }

  لاحظ أنه يتم إنشاء مثيل لتوجيهات التحقق المخصصة باستخدام useExisting بدلاً من useClass . إذا تم استخدام useClass بدلاً من useExisting ، فسيتم تسجيل نسخة فئة جديدة، لكن لن يكون لها forbiddenName .

  <نوع الإدخال = "نص" مطلوب appForbiddenName = "bob" [(ngModel)] = "hero.name">