การวิเคราะห์โดยย่อของรูปแบบตอบสนองในการเรียนรู้เชิงมุม

วิธีเริ่มต้นใช้งาน VUE3.0 อย่างรวดเร็ว: การเข้าสู่การเรียนรู้

แบบฟอร์มตอบสนอง

Angular มีสองวิธีที่แตกต่างกันในการจัดการอินพุตของผู้ใช้ผ่านแบบฟอร์ม:响应式表单และ模板驱动表单[คำแนะนำบทช่วยสอนที่เกี่ยวข้อง: "บทช่วยสอนเชิงมุม"]

• รูปแบบที่ตอบสนอง: ให้การเข้าถึงโดยตรงและชัดเจนไปยังโมเดลออบเจ็กต์ของฟอร์มพื้นฐาน มีประสิทธิภาพมากกว่าแบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลต หากแบบฟอร์มเป็นส่วนสำคัญของแอปของคุณ หรือคุณกำลังสร้างแอปโดยใช้แบบฟอร์มเชิงรับอยู่แล้ว ให้ใช้แบบฟอร์มเชิงรับ
• แบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลต: อาศัยคำแนะนำในเทมเพลตเพื่อสร้างและจัดการโมเดลออบเจ็กต์ที่ซ่อนอยู่ มีประโยชน์ในการเพิ่มแบบฟอร์มง่ายๆ ให้กับแอปของคุณ เช่น แบบฟอร์มลงทะเบียนรายชื่ออีเมล

ที่นี่แนะนำเฉพาะแบบฟอร์มตอบสนองเท่านั้น สำหรับแบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลต โปรดดูที่เว็บไซต์อย่างเป็นทางการ:

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

ลงทะเบียนโมดูลแบบฟอร์มตอบสนองทั่วโลก ReactiveFormsModule

หากต้องการใช้การควบคุมแบบฟอร์มตอบสนอง คุณจะต้องนำเข้า ReactiveFormsModule จากแพ็คเกจ @angular/forms และเพิ่มลงในอาร์เรย์ imports ของ NgModule ของคุณ ดังนี้: app.module.ts

/***** app.module.ts *****/
นำเข้า { ReactiveFormsModule } จาก '@ เชิงมุม/แบบฟอร์ม';

@NgModule({
  นำเข้า: [
    // สินค้านำเข้าอื่นๆ ...
    โมดูลแบบฟอร์มปฏิกิริยา
  -
-
ส่งออกคลาส AppModule { }

เพิ่มการควบคุมแบบฟอร์มพื้นฐาน FormControl

มีสามขั้นตอนในการใช้การควบคุมแบบฟอร์ม

• ลงทะเบียนโมดูลแบบฟอร์มเชิงโต้ตอบในแอปของคุณ โมดูลนี้ประกาศคำสั่งบางอย่างที่คุณต้องการใช้ในรูปแบบเชิงโต้ตอบ

• สร้างอินสแตนซ์ FormControl ใหม่และบันทึกไว้ในส่วนประกอบ

• ลงทะเบียน FormControl นี้ในเทมเพลต

หากต้องการลงทะเบียนการควบคุมแบบฟอร์ม ให้นำเข้าคลาส FormControl และสร้างอินสแตนซ์ใหม่ของ FormControl โดยบันทึกเป็นคุณสมบัติของคลาส ดังต่อไปนี้: test.component.ts

/***** test.component.ts *****/
นำเข้า { ส่วนประกอบ } จาก '@ เชิงมุม/หลัก';
นำเข้า { FormControl } จาก '@ เชิงมุม/แบบฟอร์ม';

@ส่วนประกอบ({
  ตัวเลือก: 'ชื่อแอป-ตัวแก้ไข',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
-
ส่งออกคลาส TestComponent {
	// คุณสามารถตั้งค่าเริ่มต้นในตัวสร้างของ FormControl ได้ ในตัวอย่างนี้คือชื่อสตริงว่าง = new FormControl('');
}

จากนั้นลงทะเบียนการควบคุมในเทมเพลตดังต่อไปนี้: test.component.html

<!-- test.component.html -->
<ฉลาก>
  ชื่อ: <input type="text" [formControl]="name">
</ฉลาก>
<!-- หากค่าที่ป้อนในอินพุตเปลี่ยนแปลง ค่าที่แสดงที่นี่ก็จะเปลี่ยนไปเช่นกัน -->
<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 } จาก '@ เชิงมุม/แบบฟอร์ม'

@ส่วนประกอบ({
  ตัวเลือก: 'ทดสอบแอป',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
-
คลาสส่งออก TestComponent ใช้ OnInit {
    ตัวสร้าง () {}

    profileForm = FormGroup ใหม่ ({
      ชื่อ: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
      นามสกุล: ใหม่ FormControl('', Validators.required),
    -
	
	onSubmit() {
		// ตรวจสอบค่าของแต่ละฟิลด์ในกลุ่มควบคุม console.log(this.profileForm.value)
    -
}

<!--profileForm FormGroup นี้เชื่อมโยงกับองค์ประกอบของฟอร์มผ่านคำสั่ง FormGroup สร้างเลเยอร์การสื่อสารระหว่างโมเดลและกล่องอินพุตในแบบฟอร์ม -->
<!-- คำสั่ง FormGroup ยังรับฟังเหตุการณ์ send ที่ปล่อยออกมาจากองค์ประกอบแบบฟอร์มและปล่อยเหตุการณ์ ngSubmit ซึ่งทำให้คุณสามารถผูกฟังก์ชันการโทรกลับได้ -
<แบบฟอร์ม [formGroup]="profileForm" (ngSubmit)="onSubmit()">
    <ฉลาก>
<!-- คำสั่ง FormControlName ผูกแต่ละกล่องอินพุตเข้ากับตัวควบคุมฟอร์ม FormControl ที่กำหนดไว้ใน FormGroup การควบคุมแบบฟอร์มเหล่านี้จะสื่อสารกับองค์ประกอบที่เกี่ยวข้อง -->
      ชื่อ: <input type="text" formControlName="firstName">
    </ฉลาก>
    <ฉลาก>
      นามสกุล: <input type="text" formControlName="lastName">
    </ฉลาก>
    <button type="submit" [disabled]="!profileForm.valid">ส่ง</button>
  </แบบฟอร์ม>

  <p>{{ profileForm.value }}</p>
  <!-- สถานะของกลุ่มควบคุม: INVALID หรือ VALID -->
  <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

นำเข้า { ส่วนประกอบ } จาก '@เชิงมุม/core';
// 1. นำเข้า FormBuilder
นำเข้า { FormBuilder, Validators } จาก '@ เชิงมุม/แบบฟอร์ม';

@ส่วนประกอบ({
  ตัวเลือก: 'ทดสอบแอป',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
-
ส่งออกคลาส TestComponent {
	// 2. ใส่ตัวสร้างบริการ FormBuilder (fb ส่วนตัว: FormBuilder) { }
    ngOnInit() { }

    profileForm = 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]*')]),
    // นามสกุล: new FormControl('', Validators.required),
    -

    onSubmit() {
      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

คลาสเครื่องมือตรวจสอบ {
  คงที่ขั้นต่ำ (นาที: หมายเลข): ​​ValidatorFn // ค่าต่ำสุดที่อนุญาตให้ป้อน คงที่สูงสุด (สูงสุด: หมายเลข): ​​ValidatorFn // ค่าสูงสุดคงที่ที่จำเป็น (การควบคุม: AbstractControl): ValidationErrors | null // ไม่ว่าจะเป็นที่ต้องการคงที่ requiredTrue (การควบคุม: AbstractControl): ValidationErrors |
  อีเมลคงที่ (การควบคุม: AbstractControl): ValidationErrors |. null // ไม่ว่าจะเป็นรูปแบบอีเมล static minLength (minLength: number): ValidatorFn // ความยาวขั้นต่ำคงที่ maxLength (maxLength: number): ValidatorFn // รูปแบบคงที่ความยาวสูงสุด (รูปแบบ: string |. RegExp): ValidatorFn // การจับคู่แบบคงที่ nullValidator (การควบคุม: AbstractControl): ValidationErrors | null // ไม่ต้องทำอะไรเลยในการเขียนแบบคงที่ (validators: ValidatorFn []): ValidatorFn |
  composeAsync แบบคงที่ (ตัวตรวจสอบ: AsyncValidatorFn []): AsyncValidatorFn | null
}

ฟังก์ชันตัวตรวจสอบความถูกต้องในตัว

การนำเข้า { ตัวตรวจสอบความถูกต้อง } จาก '@ เชิงมุม/แบบฟอร์ม';

เมื่อสร้างอินสแตนซ์ของตัวควบคุม FormControl

-
ngOnInit(): เป็นโมฆะ {
  this.heroForm = FormGroup ใหม่ ({
  // สร้างอินสแตนซ์ของชื่อตัวควบคุม FormControl: new FormControl(this.hero.name, [
      Validators.required, // การตรวจสอบความถูกต้อง, จำเป็นต้องใช้ Validators.minLength(4), // ความยาวไม่น้อยกว่า 4
      forbiddenNameValidator(/bob/i) // เครื่องมือตรวจสอบแบบกำหนดเอง]),
    alterEgo: FormControl ใหม่ (this.hero.alterEgo)
    พลัง: FormControl ใหม่ (this.hero.power, Validators.required)
  -
-
รับชื่อ () { return this.heroForm.get('name'); }

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

เครื่องมือตรวจสอบที่กำหนดเอง

สำหรับเนื้อหาของเครื่องมือตรวจสอบที่กำหนดเอง โปรดดู คู่มือ API

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

บางครั้งมีอยู่แล้วภายใน การตรวจสอบความถูกต้อง โปรเซสเซอร์ไม่สามารถตอบสนองความต้องการได้เป็นอย่างดี ตัวอย่างเช่น เราจำเป็นต้องตรวจสอบแบบฟอร์มและค่าอินพุตสามารถเป็นค่าในอาร์เรย์ที่กำหนดเท่านั้น และค่าในอาร์เรย์นี้จะเปลี่ยนแปลงแบบเรียลไทม์เมื่อโปรแกรมทำงาน เวลา ตัวตรวจสอบในตัวไม่สามารถตอบสนองข้อกำหนดนี้ได้ และจำเป็นต้องสร้างเครื่องมือตรวจสอบแบบกำหนดเอง

• เพิ่มเครื่องมือตรวจสอบที่กำหนดเองในรูปแบบตอบสนอง ในส่วนเครื่องมือตรวจสอบความถูกต้องในตัวด้านบน มีฟังก์ชัน forbiddenNameValidator ดังนี้:

  import { Validators } from '@angular/forms';
  -
  ngOnInit(): เป็นโมฆะ {
    this.heroForm = FormGroup ใหม่ ({
      ชื่อ: FormControl ใหม่ (this.hero.name, [
        Validators.จำเป็น,
        Validators.minLength(4),
        // 1. เพิ่มเครื่องมือตรวจสอบแบบกำหนดเอง forbiddenNameValidator(/bob/i)
      -
    -
  -
  // 2. ใช้งานเครื่องมือตรวจสอบความถูกต้องที่กำหนดเองซึ่งมีฟังก์ชั่นห้ามไม่ให้อินพุตค่าด้วยฟังก์ชั่นการส่งออกสตริง bob forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
    กลับ (การควบคุม: AbstractControl): ValidationErrors | null => {
      const ห้าม = nameRe.test (control.value);
      // 3. คืนค่า null เมื่อค่าถูกต้อง หรือส่งคืนออบเจ็กต์ข้อผิดพลาดในการตรวจสอบ เมื่อไม่ถูกต้อง return forbidden ? {forbiddenName: {value: control.value}} : null;
    -
  }

  เครื่องมือตรวจสอบจะส่งคืน null หากค่าถูกต้อง หรือ验证错误对象หากไม่ถูกต้อง ออบเจ็กต์ข้อผิดพลาดในการตรวจสอบความถูกต้องมักจะมีแอตทริบิวต์ที่เรียกว่าคีย์การตรวจสอบความถูกต้อง ( forbiddenName ) ค่าของมันคือพจนานุกรมที่กำหนดเองที่คุณสามารถใช้เพื่อแทรกข้อความแสดงข้อผิดพลาด ({name})

• เพิ่มเครื่องมือตรวจสอบแบบกำหนดเองในแบบฟอร์มที่ขับเคลื่อนด้วยเทมเพลต หากต้องการเพิ่มคำสั่งให้กับเทมเพลต คำสั่งดังกล่าวจะมีฟังก์ชัน validator ในเวลาเดียวกัน คำสั่งนี้จำเป็นต้องลงทะเบียนตัวเองเป็นผู้ให้บริการ NG_VALIDATORS ดังที่แสดงด้านล่าง:

  // 1. นำเข้าคลาสที่เกี่ยวข้องนำเข้า { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } จาก '@เชิงมุม/แบบฟอร์ม';
  นำเข้า {Input} จาก '@ เชิงมุม/หลัก'
  
  @คำสั่ง({
    ตัวเลือก: '[appForbiddenName]',
    // 2. ลงทะเบียนเป็นผู้ให้บริการของผู้ให้บริการโทเค็น NG_VALIDATORS: [{ระบุ: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
  -
  คลาสส่งออก ForbiddenValidatorDirective ใช้ Validator {
    @Input('appForbiddenName') forbiddenName = '';
    // 3. ใช้อินเทอร์เฟซตัวตรวจสอบความถูกต้อง นั่นคือ ใช้ฟังก์ชันตรวจสอบความถูกต้อง ตรวจสอบ(การควบคุม: AbstractControl): ValidationErrors | null {
    	// ส่งคืนค่า null เมื่อค่าถูกต้อง หรือส่งคืนวัตถุข้อผิดพลาดในการตรวจสอบความถูกต้อง เมื่อส่งคืนสิ่งนี้ไม่ถูกต้อง forbiddenName ? forbiddenNameValidator(regExp ใหม่ (this.forbiddenName, 'i'))(control)
                                : โมฆะ;
    -
  -
  // 4. ฟังก์ชั่นการส่งออกฟังก์ชั่นการตรวจสอบที่กำหนดเอง forbiddenNameValidator (nameRe: RegExp): ValidatorFn {
    กลับ (การควบคุม: AbstractControl): ValidationErrors | null => {
      const ห้าม = nameRe.test (control.value);
      // 3. คืนค่า null เมื่อค่าถูกต้อง หรือส่งคืนออบเจ็กต์ข้อผิดพลาดในการตรวจสอบ เมื่อไม่ถูกต้อง return forbidden ? {forbiddenName: {value: control.value}} : null;
    -
  }

  โปรดทราบว่าคำสั่งการตรวจสอบความถูกต้องที่กำหนดเองจะถูกสร้างอินสแตนซ์ด้วย useExisting แทน useClass หากใช้ useClass แทน useExisting อินสแตนซ์คลาสใหม่จะถูกลงทะเบียน แต่จะไม่มี forbiddenName

  <input type="text" จำเป็นต้องใช้ appForbiddenName="bob" [(ngModel)]="hero.name">