การเรียนรู้เชิงมุมพูดถึงรูปแบบสองประเภท

ใน Angular มีแบบฟอร์มสองประเภท ได้แก่模板驱动และ模型驱动[บทช่วยสอนที่เกี่ยวข้องที่แนะนำ: "บทช่วยสอนเชิงมุม"]

1. ไดรเวอร์เทมเพลต

1.1 ภาพรวม ตรรกะ

控制逻辑ของแบบฟอร์มถูกเขียนใน组件模板ซึ่งเหมาะสำหรับประเภทแบบฟอร์ม简单

1.2 เริ่มต้นใช้งานอย่างรวดเร็ว

1) แนะนำโมดูลที่ต้องพึ่งพา

การนำเข้า FormsModule { FormsModule } จาก "@เชิงมุม/แบบฟอร์ม"

@NgModule({
  การนำเข้า: [FormsModule],
-
ส่งออกคลาส AppModule {}

2) แปลงแบบฟอร์ม DOM เป็น ngForm

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

3) ประกาศฟิลด์แบบฟอร์มเป็น ngModel

<form #f= " ngForm" (ส่ง)="onSubmit(f)">
  <ประเภทอินพุต = "ข้อความ" ชื่อ = "ชื่อผู้ใช้" ngModel />
  <ปุ่ม>ส่ง</ปุ่ม>
</form>

4) รับค่าฟิลด์แบบฟอร์ม

import { NgForm } จาก "@เชิงมุม/ฟอร์ม"

ส่งออกคลาส AppComponent {
  onSubmit (แบบฟอร์ม: NgForm) {
    console.log(form.value) // {ชื่อผู้ใช้: ''}
  -
}

5) การจัดกลุ่มแบบฟอร์ม

<form #f="ngForm" (submit)="onSubmit(f)">
  <div ngModelGroup="ผู้ใช้">
    <ประเภทอินพุต = "ข้อความ" ชื่อ = "ชื่อผู้ใช้" ngModel />
  </div>
  <div ngModelGroup="ติดต่อ">
    <ประเภทอินพุต = "ข้อความ" ชื่อ = "โทรศัพท์" ngModel />
  </div>
  <ปุ่ม>ส่ง</ปุ่ม>
</form>

นำเข้า { NgForm } จาก "@เชิงมุม/แบบฟอร์ม"

ส่งออกคลาส AppComponent {
 onSubmit (แบบฟอร์ม: NgForm) {
   console.log(form.value) // {ติดต่อ: {โทรศัพท์: ''} ผู้ใช้:{ชื่อผู้ใช้: ''}}
 -
}

1.3

• จำเป็นต้องมีการตรวจสอบแบบฟอร์ม ฟิลด์บังคับ
• ความยาวขั้นต่ำ ฟิลด์ความยาว
• ขั้นต่ำ ฟิลด์ความยาวสูงสุด
• การตรวจสอบรูปแบบความยาวสูงสุด ตัวอย่างปกติ: pattern="d" ตรงกับค่า

<form #f="ngForm" (submit)="onSubmit(f)">
  <input type="text" name="username" ngModel required pattern="d" />
  <ปุ่ม>ส่ง</ปุ่ม>
</form>

ส่งออกคลาส AppComponent {
  onSubmit (แบบฟอร์ม: NgForm) {
    // ตรวจสอบว่าแบบฟอร์มทั้งหมดได้รับการยืนยันผ่าน console.log(form.valid) หรือไม่
  -
}

<!-- ปิดการใช้งานการส่งแบบฟอร์มเมื่อทั้งแบบฟอร์มไม่ผ่านการตรวจสอบ -->
<button type="submit" [disabled]="f.invalid">ส่ง</button>

แสดงข้อความแสดงข้อผิดพลาดเมื่อรายการแบบฟอร์มล้มเหลวในเทมเพลตส่วนประกอบ

<form #f="ngForm" (ส่ง)="onSubmit(f)">
  <input #username="ngModel" />
  <div *ngIf="username.touched && !username.valid && ชื่อผู้ใช้.errors">
    <div *ngIf="username.errors.required">กรุณากรอกชื่อผู้ใช้</div>
    <div *ngIf="username.errors.pattern">ไม่สอดคล้องกับกฎปกติ</div>
  </div>
</form>

ระบุสไตล์เมื่อรายการแบบฟอร์มไม่ผ่านการตรวจสอบ

input.ng-touched.ng-ไม่ถูกต้อง {
  เส้นขอบ: สีแดงทึบ 2px;
}

2. โมเดลขับเคลื่อน

2.1 ภาพรวม

控制逻辑ของแบบฟอร์มเขียนไว้ใน组件类ซึ่งสามารถควบคุมตรรกะการตรวจสอบได้มากกว่า และเหมาะสำหรับประเภทแบบฟอร์ม复杂

ในแบบฟอร์มที่เป็นแบบโมเดล ฟิลด์แบบฟอร์มจะต้องเป็นอินสแตนซ์ของคลาส FormControl วัตถุอินสแตนซ์สามารถ验证表单字段ไม่ว่าค่าจะได้รับการแก้ไขหรือไม่ เป็นต้น

ชุดของฟิลด์แบบฟอร์มประกอบด้วยแบบฟอร์มทั้งหมด และแบบฟอร์มทั้งหมดต้องเป็นอินสแตนซ์ของคลาส FormGroup ซึ่งสามารถตรวจสอบความถูกต้อง整体ของแบบฟอร์มได้

• FormControl: รายการแบบฟอร์มในกลุ่มแบบฟอร์ม

• FormGroup: กลุ่มแบบฟอร์ม อย่างน้อยหนึ่ง

• รายการใน FormArray ล้มเหลวและล้มเหลวทั้งหมด

2.2 เริ่มต้นอย่างรวดเร็ว

1) แนะนำ ReactiveFormsModule

นำเข้า { ReactiveFormsModule } จาก "@เชิงมุม/แบบฟอร์ม"

@NgModule({
  การนำเข้า: [ReactiveFormsModule]
-
ส่งออกคลาส AppModule {}

2) สร้างวัตถุควบคุมฟอร์ม FormGroup ในคลาสส่วนประกอบ

import { FormControl, FormGroup } จาก "@เชิงมุม/แบบฟอร์ม"

ส่งออกคลาส AppComponent {
  แบบฟอร์มการติดต่อ: FormGroup = FormGroup ใหม่ ({
    ชื่อ: FormControl ใหม่ ()
    โทรศัพท์: FormControl ใหม่ ()
  -
}

3). แบบฟอร์มในเทมเพลตส่วนประกอบที่เกี่ยวข้อง

<form [formGroup]="contactForm" (submit)="onSubmit()">
  <ประเภทอินพุต = "ข้อความ" formControlName = "ชื่อ" />
  <ประเภทอินพุต = "ข้อความ" formControlName = "โทรศัพท์" />
  <ปุ่ม>ส่ง</ปุ่ม>
</form>

4) รับ

คลาสส่งออกค่าฟอร์ม AppComponent {
  onSubmit() {
    console.log (this.contactForm.value)
  -
}

5) ตั้งค่าแบบฟอร์มเริ่มต้น

contactForm: FormGroup = new FormGroup({
  ชื่อ: ใหม่ FormControl("ค่าเริ่มต้น"),
  โทรศัพท์: FormControl ใหม่ (15888888888)
})

6) การจัดกลุ่มแบบฟอร์ม

contactForm: FormGroup = new FormGroup({
  ชื่อเต็ม: FormGroup ใหม่ ({
    ชื่อ: ใหม่ FormControl()
    นามสกุล: FormControl ใหม่ ()
  -
  โทรศัพท์: FormControl ใหม่ ()
})

<แบบฟอร์ม [formGroup]="contactForm" (ส่ง)="onSubmit()">
  <div formGroupName="ชื่อเต็ม">
    <ประเภทอินพุต = "ข้อความ" formControlName = "firstName" />
    <ประเภทอินพุต = "ข้อความ" formControlName = "นามสกุล" />
  </div>
  <ประเภทอินพุต = "ข้อความ" formControlName = "โทรศัพท์" />
  <ปุ่ม>ส่ง</ปุ่ม>
</form>

onSubmit() {
  console.log (this.contactForm.value.name.username)
  console.log(this.contactForm.get(["ชื่อ", "ชื่อผู้ใช้"])?.value)
}

2.3

ข้อกำหนดของ FormArray: กลุ่มข้อมูลการติดต่อจะแสดงบนเพจตามค่าเริ่มต้น และสามารถเพิ่มกลุ่มข้อมูลการติดต่อเพิ่มเติมได้โดยการคลิกที่ปุ่ม

นำเข้า { ส่วนประกอบ, OnInit } จาก "@เชิงมุม/แกน"
นำเข้า { FormArray, FormControl, FormGroup } จาก "@เชิงมุม/แบบฟอร์ม"
@ส่วนประกอบ({
  ตัวเลือก: "app-root",
  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)
  -

  // ลบข้อมูลผู้ติดต่อ ลบผู้ติดต่อ (i: หมายเลข) {
    this.contacts.removeAt(i)
  -

  ngOnInit() {
    //เพิ่มข้อมูลการติดต่อเริ่มต้น this.addContact()
  -

  onSubmit() {
    console.log (this.contactForm.value)
  -
}

<แบบฟอร์ม [formGroup]="contactForm" (ส่ง)="onSubmit()">
  <div formArrayName="ผู้ติดต่อ">
    <div
      *ngFor="ให้ติดต่อของ contacts.controls; ให้ i = ดัชนี"
      [formGroupName]="ฉัน"
    -
      <ประเภทอินพุต = "ข้อความ" formControlName = "ชื่อ" />
      <ประเภทอินพุต = "ข้อความ" formControlName = "ที่อยู่" />
      <ประเภทอินพุต = "ข้อความ" formControlName = "โทรศัพท์" />
      <button (click)="removeContact(i)">ลบข้อมูลการติดต่อ</button>
    </div>
  </div>
  <button (click)="addContact()">เพิ่มข้อมูลการติดต่อ</button>
  <ปุ่ม>ส่ง</ปุ่ม>
</form>

2.4 เครื่องมือตรวจสอบแบบฟอร์มในตัว

1) ใช้กฎการตรวจสอบที่ได้รับจากเครื่องมือตรวจสอบความถูกต้องในตัวเพื่อตรวจสอบความถูกต้องของฟิลด์แบบฟอร์ม

นำเข้า { FormControl, FormGroup, Validators } จาก "@เชิงมุม/แบบฟอร์ม"

แบบฟอร์มการติดต่อ: FormGroup = FormGroup ใหม่ ({
  ชื่อ: FormControl ใหม่ ("ค่าเริ่มต้น", [
    Validators.จำเป็น,
    Validators.minLength(2)
  -
})

2). รับว่าแบบฟอร์มทั้งหมดผ่านการตรวจสอบ

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

<!-- ปิดการใช้งานปุ่มแบบฟอร์มเมื่อทั้งแบบฟอร์มไม่ผ่านการตรวจสอบ -->
<button [disabled]="contactForm.invalid">ส่ง</button>

3) แสดงข้อความแสดงข้อผิดพลาดเมื่อมีการผ่านการตรวจสอบในเทมเพลตส่วนประกอบ

รับชื่อ () {
  ส่งคืน this.contactForm.get("ชื่อ")!
}

<แบบฟอร์ม [formGroup]="contactForm" (ส่ง)="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 }}
    </div>
  </div>
</form>

2.5 ตัวตรวจสอบรูปแบบซิงโครนัสแบบกำหนดเอง

• ประเภทของตัวตรวจสอบแบบกำหนดเองคือคลาส TypeScript

คลาส

• มี

• วิธีการตรวจสอบเฉพาะ

• อันที่จริงมันเป็นประเภทของวัตถุอินสแตนซ์ของคลาส FormControl

• หากการตรวจสอบสำเร็จ null จะถูกส่งกลับ

• หากการตรวจสอบล้มเหลว วัตถุจะถูกส่งกลับ คุณลักษณะในวัตถุคือรหัสการตรวจสอบ และค่าคือ จริง ซึ่งบ่งชี้ว่าการตรวจสอบล้มเหลว

• ค่าที่ส่งคืนของวิธีการตรวจสอบคือ ValidationErrors | null

import { AbstractControl, ValidationErrors } จาก "@เชิงมุม/แบบฟอร์ม"

ส่งออกคลาส NameValidators {
  // ค่าฟิลด์ไม่สามารถมีช่องว่าง static cannotContainSpace(control: AbstractControl): ValidationErrors | null {
    // การตรวจสอบล้มเหลวหาก (/s/.test(control.value)) ส่งคืน { cannotContainSpace: true }
    //การตรวจสอบผ่าน return null
  -
}

นำเข้า { NameValidators } จาก "./Name.validators"

แบบฟอร์มการติดต่อ: FormGroup = FormGroup ใหม่ ({
  ชื่อ: FormControl ใหม่ ("", [
    Validators.จำเป็น,
    NameValidators.cannotContainSpace
  -
})

<div *ngIf="name.touched && name.invalid && name.errors">
	<div *ngIf="name.errors.cannotContainSpace">ชื่อไม่สามารถมีช่องว่างได้</div>
</div>

2.6 ตัวตรวจสอบรูปแบบอะซิงโครนัสแบบกำหนดเอง

นำเข้า { AbstractControl, ValidationErrors } จาก "@เชิงมุม/แบบฟอร์ม"
นำเข้า { สังเกตได้ } จาก "rxjs"

ส่งออกคลาส NameValidators {
  shouldBeUnique แบบคงที่ (การควบคุม: AbstractControl): สัญญา <ValidationErrors | .
    คืนสัญญาใหม่ (แก้ไข => {
      ถ้า (control.value == "ผู้ดูแลระบบ") {
         แก้ไข ({ shouldBeUnique: true })
       } อื่น {
         แก้ไข(null)
       -
    -
  -
}

แบบฟอร์มการติดต่อ: FormGroup = FormGroup ใหม่ ({
    ชื่อ: FormControl ใหม่ (
      -
      -
        ผู้ตรวจสอบความถูกต้อง.จำเป็น
      -
      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 : กลุ่มฟอร์ม ฟอร์มอย่างน้อยหนึ่ง FormGroup

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

นำเข้า { FormBuilder, FormGroup, Validators } จาก "@เชิงมุม/แบบฟอร์ม"

ส่งออกคลาส AppComponent {
  แบบฟอร์มการติดต่อ: FormGroup
  ตัวสร้าง (fb ส่วนตัว: 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 } จาก "@เชิงมุม/แบบฟอร์ม"

ส่งออกคลาส AppComponent {
  ชื่อสาธารณะ = 'a';
  ชื่อสาธารณะเปลี่ยน () {
  -
}

Angular ไม่แนะนำให้ใช้ ngModalChange อย่างเป็นทางการ

2.8.2 การควบคุมแบบฟอร์ม

<div [formGroup]="contactForm">
  <ประเภทอินพุต = "ข้อความ" formControlName = "ชื่อ" />
</div>

นำเข้า { FormControl, FormGroup } จาก "@เชิงมุม/แบบฟอร์ม"

ส่งออกคลาส AppComponent {
  แบบฟอร์มการติดต่อ: FormGroup = FormGroup ใหม่ ({
    ชื่อ: FormControl ใหม่ ()
  -
	
	ngOnInt() {
		this.contactForm.get("ชื่อ").valueChanges.subscribe(ข้อมูล => {
			console.log(ข้อมูล);
		-
	-
}

2.9 แบบฝึกหัด

ที่ 1) รับค่าที่เลือกในกลุ่มของช่องทำเครื่องหมาย

<form [formGroup]="form" (submit)="onSubmit()">
  <label *ngFor="ให้รายการข้อมูล">
    <input type="ช่องทำเครื่องหมาย" [value]="item.value" (change)="onChange($event)" />
    {{ รายการชื่อ }}
  </ฉลาก>
  <ปุ่ม>ส่ง</ปุ่ม>
</form>

นำเข้า { ส่วนประกอบ } จาก "@เชิงมุม/แกน"
นำเข้า { FormArray, FormBuilder, FormGroup } จาก "@เชิงมุม/แบบฟอร์ม"
ข้อมูลอินเทอร์เฟซ {
  ชื่อ: สตริง
  ค่า: สตริง
-
@ส่วนประกอบ({
  ตัวเลือก: "ช่องทำเครื่องหมายแอป",
  templateUrl: "./checkbox.component.html",
  สไตล์: []
-
ส่งออกคลาส CheckboxComponent {
  ข้อมูล: อาร์เรย์<ข้อมูล> = [
    { ชื่อ: "ลูกแพร์" ค่า: "ลูกแพร์" },
    { ชื่อ: "พลัม" ค่า: "พลัม" }
    { ชื่อ: "กีวี" ค่า: "กีวี" }
    { ชื่อ: "แอปเปิ้ล" ค่า: "แอปเปิ้ล" }
    { ชื่อ: "มะนาว" ค่า: "มะนาว" }
  -
  แบบฟอร์ม: FormGroup

  ตัวสร้าง (fb ส่วนตัว: FormBuilder) {
    this.form = this.fb.group({
      checkArray: this.fb.array([])
    -
  -

  onChange (เหตุการณ์: เหตุการณ์) {
    const target = event.target เป็น HTMLInputElement
    ตรวจสอบ const = target.checked
    ค่า const = target.value
    const checkArray = this.form.get("checkArray") เป็น FormArray

    ถ้า (ตรวจสอบ) {
      checkArray.push(this.fb.control(ค่า))
    } อื่น {
      ดัชนี const = checkArray.controls.findIndex(
        ควบคุม => control.value === ค่า
      -
      checkArray.removeAt (ดัชนี)
    -
  -

  onSubmit() {
    console.log(this.form.value)
  -
}

2) รับค่าที่เลือกในคลาส

ส่งออกปุ่มตัวเลือก AppComponent {
  แบบฟอร์ม: FormGroup

  ตัวสร้าง (fb สาธารณะ: FormBuilder) {
    this.form = this.fb.group({ เพศ: "" })
  -

  onSubmit() {
    console.log(this.form.value)
  -
}

<แบบฟอร์ม [formGroup]="แบบฟอร์ม" (ส่ง)="onSubmit()">
  <input type="radio" value="male" formControlName="gender" /> ชาย
  <input type="radio" value="Female" formControlName="gender" /> เพศหญิง
  <button type="submit">ส่ง</button>
</form>

2.10 Other

• patchValue: ตั้งค่าของการควบคุมแบบฟอร์ม (คุณสามารถตั้งค่าทั้งหมดหรือคุณสามารถตั้งค่าอย่างใดอย่างหนึ่งก็ได้ ส่วนอื่นๆ จะไม่ได้รับผลกระทบ)

• setValue: ตั้งค่าของการควบคุมแบบฟอร์ม (ตั้งค่าทั้งหมด ไม่สามารถแยกออกได้) อันใดอันหนึ่ง)

• การเปลี่ยนแปลงค่า: เมื่อแบบฟอร์ม เหตุการณ์การรีเซ็ตจะถูกทริกเกอร์เมื่อค่าของการควบคุมเปลี่ยนแปลง

• : เนื้อหาของแบบฟอร์มว่างเปล่า