يتحدث التعلم الزاوي عن نوعين من النماذج

في Angular، هناك نوعان من النماذج، النماذج模板驱动والنماذج模型驱动. [الدروس التعليمية ذات الصلة الموصى بها: "Angular Tutorial"]

1. برنامج تشغيل القالب

1.1 نظرة عامة

تتم كتابة控制逻辑الخاص بالنموذج في组件模板، وهو مناسب لأنواع النماذج简单.

1.2 ابدأ بسرعة

1). قدم الوحدة التابعة FormsModule

import { FormsModule } من "@angular/forms"

@NgModule({
  الواردات: [FormsModule]،
})
فئة التصدير AppModule {}

2) تحويل نموذج DOM إلى ngForm

<form #f="ngForm" (submit)="onSubmit(f)"></form>

3) قم بتعريف حقل النموذج كـ ngModel

<form #f= " ngForm" (submit)="onSubmit(f)">
  <نوع الإدخال = "نص" اسم = "اسم المستخدم" ngModel />
  <button>إرسال</button>
</form>

4). احصل على قيمة حقل النموذج

import { NgForm } من "@angular/forms"

فئة التصدير AppComponent {
  onSubmit(النموذج: NgForm) {
    console.log(form.value) // {اسم المستخدم: ''}
  }
}

5)، تجميع النماذج

<form #f="ngForm" (submit)="onSubmit(f)">
  <div ngModelGroup="user">
    <نوع الإدخال = "نص" اسم = "اسم المستخدم" ngModel />
  </div>
  <div ngModelGroup="contact">
    <نوع الإدخال = "نص" اسم = "هاتف" ngModel />
  </div>
  <button>إرسال</button>
</form>

استيراد { NgForm } من "@angular/forms"

فئة التصدير AppComponent {
 onSubmit(النموذج: NgForm) {
   console.log(form.value) // {جهة الاتصال: {phone: ''}، المستخدم:{اسم المستخدم: ''}}
 }
}

1.3 يتطلب التحقق من صحة النموذج

• حقل الحد الأدنى
• للطول المطلوب
• لحقل الحد الأقصى للطول الحد الأقصى للطول
• للتحقق من النمط مثال عادي: النمط = "d" يتطابق مع قيمة

<form #f="ngForm" (submit)="onSubmit(f)">
  <نوع الإدخال = "نص" اسم = "اسم المستخدم" ngModel مطلوب النمط = "d" />
  <button>إرسال</button>
</form>

فئة التصدير AppComponent {
  onSubmit(النموذج: NgForm) {
    // تحقق مما إذا كان قد تم التحقق من النموذج بأكمله من خلال console.log(form.valid)
  }
}

<!-- تعطيل إرسال النموذج عندما يفشل النموذج بأكمله في التحقق من صحته -->
<button type="submit" [disabled]="f.invalid">Submit</button>

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

<form #f="ngForm" (submit)="onSubmit(f)">
  <input #username="ngModel" />
  <div *ngIf="username.touched && !username.valid && username.errors">
    <div *ngIf="username.errors.required">يُرجى إدخال اسم المستخدم</div>
    <div *ngIf="username.errors.pattern">لا يتوافق مع القواعد العادية</div>
  </div>
</form>

يحدد النمط عندما يفشل عنصر النموذج في التحقق من الصحة.

input.ng-touched.ng-غير صالح {
  الحدود: 2 بكسل أحمر خالص؛
}

2. نموذج مدفوع

2.1 نظرة عامة

تتم كتابة控制逻辑الخاص بالنموذج في组件类، التي تتمتع بقدر أكبر من التحكم في منطق التحقق ومناسبة لأنواع النماذج复杂.

في النموذج الذي يستند إلى نموذج، يجب أن يكون حقل النموذج مثيلًا لفئة FormControl . يمكن لكائن المثيل验证表单字段، وما إذا كانت القيمة قد تم تعديلها، وما إلى ذلك.

تشكل مجموعة حقول النموذج النموذج بأكمله، ويجب أن يكون النموذج بأكمله مثيلًا لفئة FormGroup ، والتي يمكنها إجراء التحقق整体من صحة النموذج.

• FormControl: عنصر نموذج في مجموعة نموذج.

• FormGroup: مجموعة نموذج. النموذج عبارة عن FormGroup واحد على الأقل

• : يستخدم للنماذج المعقدة يفشل ويفشل كله .

2.2 البدء سريعًا

1)، تقديم ReactiveFormsModule

import { ReactiveFormsModule } من "@angular/forms"

@NgModule({
  الواردات: [ReactiveFormsModule]
})
فئة التصدير AppModule {}

2). قم بإنشاء كائن تحكم نموذج FormGroup في فئة المكون

import {FormControl, FormGroup} من "@angular/forms"

فئة التصدير AppComponent {
  ContactForm: FormGroup = new FormGroup({
    الاسم: FormControl () الجديد،
    الهاتف: FormControl الجديد ()
  })
}

3). النموذج في قالب المكون المرتبط

<form [formGroup]="contactForm" (submit)="onSubmit()">
  <نوع الإدخال = "نص" formControlName = "الاسم" />
  <نوع الإدخال = "نص" formControlName = "الهاتف" />
  <button>إرسال</button>
</form>

4). احصل على فئة تصدير قيمة النموذج

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

5). قم بتعيين القيمة الافتراضية للنموذج

contactForm: FormGroup = new FormGroup({
  الاسم: FormControl الجديد ("القيمة الافتراضية")،
  الهاتف: FormControl الجديد (15888888888)
})

6)، نموذج تجميع

جهة الاتصال: FormGroup = new FormGroup({
  الاسم الكامل: مجموعة النماذج الجديدة({
    الاسم الأول: FormControl () الجديد،
    الاسم الأخير: FormControl الجديد ()
  }),
  الهاتف: FormControl الجديد ()
})

<form [formGroup]="contactForm" (submit)="onSubmit()">
  <divformGroupName="fullName">
    <نوع الإدخال = "نص" formControlName = "الاسم الأول" />
    <نوع الإدخال = "نص" formControlName = "الاسم الأخير" />
  </div>
  <نوع الإدخال = "نص" formControlName = "الهاتف" />
  <button>إرسال</button>
</form>

onSubmit() {
  console.log(this.contactForm.value.name.username)
  console.log(this.contactForm.get(["name", "username"])?.value)
}

2.3 متطلبات FormArray

: يتم عرض مجموعة من معلومات الاتصال على الصفحة افتراضيًا، ويمكن إضافة المزيد من مجموعات معلومات الاتصال بالنقر فوق الزر.

استيراد {Component، OnInit} من "@angular/core"
استيراد {FormArray، FormControl، FormGroup} من "@angular/forms"
@عنصر({
  المحدد: "جذر التطبيق"،
  templateUrl: "./app.component.html"،
  الأنماط: []
})
فئة التصدير AppComponent تنفذ OnInit {
  // نموذج جهة الاتصال: FormGroup = new FormGroup({
    جهات الاتصال: FormArray الجديد ([])
  })

  الحصول على جهات الاتصال () {
    قم بإرجاع this.contactForm.get("contacts") كـ FormArray
  }

  // أضف معلومات الاتصال addContact() {
    // معلومات الاتصال const myContact: FormGroup = new FormGroup({
      الاسم: FormControl () الجديد،
      العنوان: FormControl () الجديد،
      الهاتف: FormControl الجديد ()
    })
    // أضف معلومات جهة الاتصال إلى صفيف معلومات جهة الاتصال this.contacts.push(myContact)
  }

  // حذف معلومات الاتصال RemoveContact(i: number) {
    this.contacts.removeAt(i)
  }

  نجونينيت () {
    // أضف معلومات الاتصال الافتراضية this.addContact()
  }

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

<form [formGroup]="contactForm" (submit)="onSubmit()">
  <divformArrayName="contacts">
    <div
      *ngFor = "السماح باتصال جهات الاتصال. الضوابط؛ دع i = الفهرس"
      [formGroupName]="i"
    >
      <نوع الإدخال = "نص" formControlName = "الاسم" />
      <نوع الإدخال = "نص" formControlName = "عنوان" />
      <نوع الإدخال = "نص" formControlName = "الهاتف" />
      <button (click)="removeContact(i)">إزالة معلومات الاتصال</button>
    </div>
  </div>
  <button (click)="addContact()">إضافة معلومات الاتصال</button>
  <button>إرسال</button>
</form>

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

1) استخدم قواعد التحقق التي يوفرها برنامج التحقق من الصحة المدمج للتحقق من صحة حقول النموذج

import { FormControl, FormGroup, Validators } from "@angular/forms"

ContactForm: FormGroup = new FormGroup({
  الاسم: FormControl الجديد ("القيمة الافتراضية"، [
    المدققون.مطلوبون،
    Validators.minLength(2)
  ])
})

2). احصل على ما إذا كان النموذج بأكمله قد اجتاز عملية التحقق

onSubmit() {
  console.log(this.contactForm.valid)
}

<!-- تعطيل أزرار النموذج عندما يفشل التحقق من النموذج بأكمله -->
<button [disabled]="contactForm.invalid">إرسال</button>

3). عرض رسالة الخطأ عند تمرير التحقق في قالب المكون

get name() {
  قم بإرجاع this.contactForm.get("name")!
}

<form [formGroup]="contactForm" (submit)="onSubmit()">
  <نوع الإدخال = "نص" formControlName = "الاسم" />
  <div *ngIf="name.touched && name.invalid && name.errors">
    <div *ngIf="name.errors.required">يُرجى إدخال اسمك</div>
    <div *ngIf="name.errors.maxlength">
      لا يمكن أن يكون طول الاسم أكبر من {{ name.errors.maxlength.requiredLength }}. الطول الفعلي هو {{ name.errors.maxlength.actualLength }}
    </div>
  </div>
</form>

2.5 مدقق النموذج المتزامن المخصص

• نوع المدقق المخصص هو فئة TypeScript

• . تحتوي الفئة على طرق تحقق محددة. يجب أن تكون طريقة التحقق ثابتة

• . في الواقع، هذا هو نوع كائن المثيل لفئة FormControl.

• إذا نجح التحقق

• ، فسيتم إرجاع القيمة الفارغة صحيح، مما يشير إلى فشل التحقق.

• القيمة المرجعة لأسلوب التحقق هي ValidationErrors |. null

import { AbstractControl, ValidationErrors } from "@angular/forms"

تصدير فئة NameValidators {
  // لا يمكن أن تحتوي قيم الحقل على مسافات static CantainSpace(control: AbstractControl): ValidationErrors null { |
    // فشل التحقق إذا (/s/.test(control.value)) return { لا يمكن أن يحتوي على مساحة: صحيح }
    // تم التحقق من العودة فارغة
  }
}

استيراد { NameValidators } من "./Name.validators"

ContactForm: FormGroup = مجموعة نماذج جديدة({
  الاسم: FormControl الجديد(""، [
    المدققون.مطلوبون،
    NameValidators.cannotContainSpace
  ])
})

<div *ngIf="name.touched && name.invalid && name.errors">
	<div *ngIf="name.errors.cannotContainSpace">لا يمكن أن يحتوي الاسم على مسافات</div>
</div>

2.6 استيراد أداة التحقق من صحة النماذج غير المتزامنة المخصصة

{ AbstractControl, ValidationErrors } من "@angular/forms"
استيراد {يمكن ملاحظته} من "rxjs"

تصدير فئة NameValidators {
  static mustBeUnique(control: AbstractControl): Promise<ValidationErrors |.null> {
    إرجاع وعد جديد (الحل => {
      إذا (control.value == "المشرف") {
         حل ({ ينبغي أن تكون فريدة من نوعها: صحيح })
       } آخر {
         حل (خالية)
       }
    })
  }
}

contactForm: FormGroup = new FormGroup({
    الاسم: التحكم في النموذج الجديد (
      ""،
      [
        المدققون.مطلوب
      ]،
      NameValidators.shouldBeUnique
    )
  })

<div *ngIf="name.touched && name.invalid && name.errors">
  <div *ngIf="name.errors.shouldBeUnique">اسم مستخدم مكرر</div>
</div>
<div *ngIf="name.pending">اكتشاف ما إذا كانت الأسماء مكررة</div>

2.7 اختصار FormBuilder

快捷نموذج.

• this.fb.control : عنصر النموذج

• this.fb.group : مجموعة النموذج، النموذج عبارة عن مجموعة نموذج واحدة على الأقل

• this.fb.array : يستخدم للنماذج المعقدة، يمكنك إضافة عناصر النموذج أو مجموعات النماذج ديناميكيًا، أثناء التحقق من صحة النموذج، هناك هو FormArray فشل العنصر وفشل الكل.

استيراد {FormBuilder، FormGroup، Validators} من "@angular/forms"

فئة التصدير AppComponent {
  نموذج الاتصال: FormGroup
  منشئ (فيسبوك خاص: FormBuilder) {
    this.contactForm = this.fb.group({
      الاسم الكامل: this.fb.group({
        الاسم الأول: [""، [Validators.required]]،
        اسم العائلة: [""]
      }),
      هاتف: []
    })
  }
}

2.8 مراقبة التغييرات في قيم النموذج

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

2.8.1 ngModalChange

<div>.
  <input type = "text" [(ngModal)] = "name" (ngModalChange) = "nameChange ()" />
</div>

استيراد { FormControl، FormGroup } من "@angular/forms"

فئة التصدير AppComponent {
  الاسم العام = 'أ'؛
  تغيير الاسم العام () {
  }
}

لا توصي Angular رسميًا باستخدام ngModalChange.

2.8.2 التحكم في النموذج

<div [formGroup]="contactForm">
  <نوع الإدخال = "نص" formControlName = "الاسم" />
</div>

استيراد { FormControl، FormGroup } من "@angular/forms"

فئة التصدير AppComponent {
  ContactForm: FormGroup = مجموعة نماذج جديدة({
    الاسم: FormControl الجديد ()
  })
	
	نجونينت () {
		this.contactForm.get("name").valueChanges.subscribe(data => {
			console.log(data);
		}
	}
}

2.9 التمرين

1)، احصل على القيمة المحددة في مجموعة من خانات الاختيار

<form [formGroup]="form" (submit)="onSubmit()">
  <label *ngFor="let item of Data">
    <input type="checkbox" [value]="item.value" (change)="onChange($event)" />
    {{ اسم العنصر }}
  </التسمية>
  <button>إرسال</button>
</form>

استيراد { Component } من "@angular/core"
استيراد {FormArray، FormBuilder، FormGroup} من "@angular/forms"
بيانات الواجهة {
  الاسم: سلسلة
  القيمة: سلسلة
}
@عنصر({
  المحدد: "مربع اختيار التطبيق"،
  templateUrl: "./checkbox.component.html"،
  الأنماط: []
})
فئة التصدير CheckboxComponent {
  البيانات: الصفيف<البيانات> = [
    { الاسم: "كمثرى"، القيمة: "كمثرى" }،
    { الاسم: "برقوق"، القيمة: "برقوق" }،
    { الاسم: "كيوي"، القيمة: "كيوي" }،
    { الاسم: "أبل"، القيمة: "أبل" }،
    { الاسم: "الجير"، القيمة: "الجير" }
  ]
  النموذج: مجموعة النماذج

  منشئ (فيسبوك خاص: FormBuilder) {
    this.form = this.fb.group({
      checkArray: this.fb.array([])
    })
  }

  onChange(الحدث: الحدث) {
    هدف ثابت = حدث.target كـ HTMLInputElement
    تم التحقق من const = target.checked
    قيمة ثابتة = target.value
    const checkArray = this.form.get("checkArray") كـ FormArray

    إذا (محدد) {
      checkArray.push(this.fb.control(value))
    } آخر {
      فهرس ثابت = checkArray.controls.findIndex (
        التحكم => التحكم. القيمة === القيمة
      )
      checkArray.removeAt(الفهرس)
    }
  }

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

2). احصل على القيمة المحددة في زر الاختيار

فئة التصدير AppComponent {
  النموذج: مجموعة النماذج

  منشئ (ب العام: FormBuilder) {
    this.form = this.fb.group({ الجنس: "" })
  }

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

<form [formGroup]="form" (submit)="onSubmit()">
  <input type="radio" value="male"formControlName="gender" /> ذكر
  <input type = "radio" value = "أنثى" formControlName = "gender" /> أنثى
  <button type="submit">إرسال</button>
</form>

2.10

• قيمة التصحيح الأخرى: تعيين قيمة عنصر تحكم النموذج (يمكنك تعيين الكل، أو يمكنك تعيين واحد منهم، ولا يتأثر الآخرون)

• setValue: تعيين قيمة عنصر تحكم النموذج (تعيين الكل، لا يمكن استبعاده

)

• أي واحد)

• valueChanges: عندما يتم تشغيل حدث إعادة تعيين النموذج عندما تتغير قيمة عنصر التحكم

• : يتم إفراغ محتوى النموذج