Pembelajaran sudut bercakap tentang dua jenis bentuk

Artikel ini akan membawa anda melalui borang dalam sudut dan mempelajari tentang dua jenis borang: dipacu templat dan dipacu model saya harap ia akan membantu anda!

Dalam Sudut, terdapat dua jenis bentuk iaitu 模板驱动 dan 模型驱动. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]

1. Pemacu templat

1.1 Gambaran Keseluruhan<.> borang 🎜>

ditulis dalam 控制逻辑, yang sesuai untuk jenis bentuk 组件模板. 简单

1.2 Bermula dengan pantas

1), memperkenalkan modul bergantung FormsModule

import { FormsModule } from "@angular/forms"

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

2), tukar Borang DOM Untuk ngForm

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

3), isytiharkan medan borang sebagai ngModel

<form #f="ngForm" (submit)="onSubmit(f)">
  <input type="text" name="username" ngModel />
  <button>提交</button>
</form>

4), dapatkan nilai medan borang

import { NgForm } from "@angular/forms"

export class AppComponent {
  onSubmit(form: NgForm) {
    console.log(form.value) // {username: ''}
  }
}

5) , pengumpulan borang

<form #f="ngForm" (submit)="onSubmit(f)">
  <div ngModelGroup="user">
    <input type="text" name="username" ngModel />
  </div>
  <div ngModelGroup="contact">
    <input type="text" name="phone" ngModel />
  </div>
  <button>提交</button>
</form>

import { NgForm } from "@angular/forms"

export class AppComponent {
 onSubmit(form: NgForm) {
   console.log(form.value) // {contact: {phone: ''}, user:{username: ''}}
 }
}

1.3 Pengesahan borang

medan diperlukan yang diperlukan
• minimum minlength panjang medan
• maxlength Panjang maksimum medan
• contoh biasa pengesahan corak: pattern="d" sepadan dengan nilai

<form #f="ngForm" (submit)="onSubmit(f)">
  <input type="text" name="username" ngModel required pattern="\d" />
  <button>提交</button>
</form>

export class AppComponent {
  onSubmit(form: NgForm) {
    // 查看表单整体是否验证通过
    console.log(form.valid)
  }
}

<!-- 表单整体未通过验证时禁用提交表单 -->
<button type="submit" [disabled]="f.invalid">提交</button>

dalam templat komponen Memaparkan mesej ralat apabila item borang gagal.

<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>

Nyatakan gaya apabila item borang gagal pengesahan.

input.ng-touched.ng-invalid {
  border: 2px solid red;
}

2. Model dipacu

2.1 Gambaran Keseluruhan

Borang

ditulis dalam 控制逻辑, yang mempunyai lebih kawalan ke atas logik pengesahan dan sesuai untuk jenis borang 组件类. 复杂

Dalam bentuk dipacu model, medan borang perlu menjadi contoh kelas

Objek contoh boleh menjadi nilai dalam FormControl, sama ada nilai telah diubah suai, dsb. 验证表单字段

Satu set medan borang membentuk keseluruhan borang. Keseluruhan borang perlu menjadi contoh kelas
, yang boleh FormGroup mengesahkan borang. 整体

• FormControl: item borang dalam kumpulan borang

• FormGroup: borang kumpulan, borang itu sekurang-kurangnya A FormGroup

• FormArray: digunakan untuk borang yang kompleks, yang boleh menambah item borang atau membentuk kumpulan secara dinamik Semasa pengesahan borang, jika satu item dalam FormArray gagal, keseluruhan borang gagal.

2.2 Bermula dengan pantas

1), memperkenalkan ReactiveFormsModule

import { ReactiveFormsModule } from "@angular/forms"

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

2) , Cipta objek kawalan borang FormGroup dalam kelas komponen

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

export class AppComponent {
  contactForm: FormGroup = new FormGroup({
    name: new FormControl(),
    phone: new FormControl()
  })
}

3), kaitkan borang dalam templat komponen

<form [formGroup]="contactForm" (submit)="onSubmit()">
  <input type="text" formControlName="name" />
  <input type="text" formControlName="phone" />
  <button>提交</button>
</form>

4), dan dapatkan nilai borang

export class AppComponent {
  onSubmit() {
    console.log(this.contactForm.value)
  }
}

5), menetapkan nilai lalai borang

contactForm: FormGroup = new FormGroup({
  name: new FormControl("默认值"),
  phone: new FormControl(15888888888)
})

6), kumpulan borang

contactForm: FormGroup = new FormGroup({
  fullName: new FormGroup({
    firstName: new FormControl(),
    lastName: new FormControl()
  }),
  phone: new FormControl()
})

<form [formGroup]="contactForm" (submit)="onSubmit()">
  <div formGroupName="fullName">
    <input type="text" formControlName="firstName" />
    <input type="text" formControlName="lastName" />
  </div>
  <input type="text" formControlName="phone" />
  <button>提交</button>
</form>

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

2.3 FormArray

Keperluan: Sekumpulan maklumat hubungan dipaparkan pada halaman secara lalai, dan lebih banyak kumpulan maklumat hubungan boleh ditambah dengan mengklik butang.

import { Component, OnInit } from "@angular/core"
import { FormArray, FormControl, FormGroup } from "@angular/forms"
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styles: []
})
export class AppComponent implements OnInit {
  // 表单
  contactForm: FormGroup = new FormGroup({
    contacts: new FormArray([])
  })

  get contacts() {
    return this.contactForm.get("contacts") as FormArray
  }

  // 添加联系方式
  addContact() {
    // 联系方式
    const myContact: FormGroup = new FormGroup({
      name: new FormControl(),
      address: new FormControl(),
      phone: new FormControl()
    })
    // 向联系方式数组中添加联系方式
    this.contacts.push(myContact)
  }

  // 删除联系方式
  removeContact(i: number) {
    this.contacts.removeAt(i)
  }

  ngOnInit() {
    // 添加默认的联系方式
    this.addContact()
  }

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

<form [formGroup]="contactForm" (submit)="onSubmit()">
  <div formArrayName="contacts">
    <div
      *ngFor="let contact of contacts.controls; let i = index"
      [formGroupName]="i"
    >
      <input type="text" formControlName="name" />
      <input type="text" formControlName="address" />
      <input type="text" formControlName="phone" />
      <button (click)="removeContact(i)">删除联系方式</button>
    </div>
  </div>
  <button (click)="addContact()">添加联系方式</button>
  <button>提交</button>
</form>

2.4 Pengesah borang terbina dalam

1), gunakan peraturan pengesahan yang disediakan oleh pengesah terbina dalam untuk mengesahkan medan borang

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

contactForm: FormGroup = new FormGroup({
  name: new FormControl("默认值", [
    Validators.required,
    Validators.minLength(2)
  ])
})

2), dapatkan sama ada keseluruhan borang telah lulus pengesahan

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

<!-- 表单整体未验证通过时禁用表单按钮 -->
<button [disabled]="contactForm.invalid">提交</button>

3), paparkan mesej ralat apabila pengesahan masuk templat komponen

get name() {
  return this.contactForm.get("name")!
}

<form [formGroup]="contactForm" (submit)="onSubmit()">
  <input type="text" formControlName="name" />
  <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 Pengesah borang segerak tersuai

• Jenis pengesah tersuai ialah Kelas TypeScript

mengandungi kaedah pengesahan khusus, yang mestilah kaedah statik
Kaedah pengesahan mempunyai kawalan parameter, jenis AbstractControl. Sebenarnya, ia adalah jenis objek contoh kelas FormControl
Jika pengesahan berjaya, kembalikan null
Jika pengesahan gagal, kembalikan objek dan atribut dalam objek Ia adalah pengecam pengesahan, nilainya adalah benar, menunjukkan bahawa pengesahan gagal
Nilai pulangan kaedah pengesahan ialah ValidationErrors |

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

export class NameValidators {
  // 字段值中不能包含空格
  static cannotContainSpace(control: AbstractControl): ValidationErrors | null {
    // 验证未通过
    if (/\s/.test(control.value)) return { cannotContainSpace: true }
    // 验证通过
    return null
  }
}

import { NameValidators } from "./Name.validators"

contactForm: FormGroup = new FormGroup({
  name: new FormControl("", [
    Validators.required,
    NameValidators.cannotContainSpace
  ])
})

<div *ngIf="name.touched && name.invalid && name.errors">
	<div *ngIf="name.errors.cannotContainSpace">姓名中不能包含空格</div>
</div>

2.6 Pengesah Borang Tak Segerak Tersuai

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

export class NameValidators {
  static shouldBeUnique(control: AbstractControl): Promise<ValidationErrors | null> {
    return new Promise(resolve => {
      if (control.value == "admin") {
         resolve({ shouldBeUnique: true })
       } else {
         resolve(null)
       }
    })
  }
}

contactForm: FormGroup = new FormGroup({
    name: new FormControl(
      "",
      [
        Validators.required
      ],
      NameValidators.shouldBeUnique
    )
  })

<div *ngIf="name.touched && name.invalid && name.errors">
  <div *ngIf="name.errors.shouldBeUnique">用户名重复</div>
</div>
<div *ngIf="name.pending">正在检测姓名是否重复</div>

2.7 FormBuilderCara

untuk mencipta borang.

快捷

• : item borang

  this.fb.control

• : kumpulan borang, borang sekurang-kurangnya satu Kumpulan Borang

  this.fb.group

• : Digunakan untuk borang kompleks, yang boleh menambah item borang atau membentuk kumpulan secara dinamik semasa pengesahan borang, jika satu item dalam FormArray gagal, keseluruhan borang gagal.

  this.fb.array

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

export class AppComponent {
  contactForm: FormGroup
  constructor(private fb: FormBuilder) {
    this.contactForm = this.fb.group({
      fullName: this.fb.group({
        firstName: ["", [Validators.required]],
        lastName: [""]
      }),
      phone: []
    })
  }
}

2.8 Memantau perubahan dalam nilai bentuk

实际工作中，我们常常需要根据某个表单值得变化而进行相应的处理，一般可以使用ngModalChange或者表单来实现

2.8.1 ngModalChange

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

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

export class AppComponent {
  public name = 'a';
  public nameChange() {
  }
}

angular官方并不建议使用ngModalChange。

2.8.2 表单控制

<div [formGroup]="contactForm">
  <input type="text" formControlName="name" />
</div>

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

export class AppComponent {
  contactForm: FormGroup = new FormGroup({
    name: new FormControl()
  })
	
	ngOnInt() {
		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)" />
    {{ item.name }}
  </label>
  <button>提交</button>
</form>

import { Component } from "@angular/core"
import { FormArray, FormBuilder, FormGroup } from "@angular/forms"
interface Data {
  name: string
  value: string
}
@Component({
  selector: "app-checkbox",
  templateUrl: "./checkbox.component.html",
  styles: []
})
export class CheckboxComponent {
  Data: Array<Data> = [
    { name: "Pear", value: "pear" },
    { name: "Plum", value: "plum" },
    { name: "Kiwi", value: "kiwi" },
    { name: "Apple", value: "apple" },
    { name: "Lime", value: "lime" }
  ]
  form: FormGroup

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      checkArray: this.fb.array([])
    })
  }

  onChange(event: Event) {
    const target = event.target as HTMLInputElement
    const checked = target.checked
    const value = target.value
    const checkArray = this.form.get("checkArray") as FormArray

    if (checked) {
      checkArray.push(this.fb.control(value))
    } else {
      const index = checkArray.controls.findIndex(
        control => control.value === value
      )
      checkArray.removeAt(index)
    }
  }

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

2）、获取单选框中选中的值

export class AppComponent {
  form: FormGroup

  constructor(public fb: FormBuilder) {
    this.form = this.fb.group({ gender: "" })
  }

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

<form [formGroup]="form" (submit)="onSubmit()">
  <input type="radio" value="male" formControlName="gender" /> Male
  <input type="radio" value="female" formControlName="gender" /> Female
  <button type="submit">Submit</button>
</form>

2.10 其他

• patchValue：设置表单控件的值（可以设置全部，也可以设置其中某一个，其他不受影响）

• setValue：设置表单控件的值 (设置全部，不能排除任何一个)

• valueChanges：当表单控件的值发生变化时被触发的事件

• reset：表单内容置空

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci Pembelajaran sudut bercakap tentang dua jenis bentuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!