Analisis ringkas dua jenis borang dalam Sudut

Artikel ini akan membawa anda melalui dua borang dalam Angular dan secara ringkas memperkenalkan penggunaannya, saya harap ia akan membantu semua orang!

Dalam Angular, terdapat dua jenis borang iaitu dipacu templat dan dipacu model. [Cadangan tutorial berkaitan: "tutorial sudut"]

1. Pemacu templat

1.1 Gambaran Keseluruhan

Logik kawalan borang ditulis dalam templat komponen, sesuai untuk jenis bentuk mudah

1.2 Bermula dengan pantas

Perkenalkan bergantung modulFormsModule

import { FormsModule } from "@angular/forms"

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

Tukar borang DOM kepada ngForm

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

Isytiharkan medan borang sebagai ngModel

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

Dapatkan medan borang nilai

import { NgForm } from "@angular/forms"

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

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>

1.3 Pengesahan Borang

• required Medan yang diperlukan
• minlength Panjang medan minimum
• maxlength Panjang medan maksimum
• pattern Contoh biasa pengesahan: 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>

Paparkan mesej ralat apabila item borang gagal pengesahan dalam templat komponen

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

Tentukan gaya apabila item borang gagal pengesahan

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

2 . Didorong model

2.1 Gambaran Keseluruhan

Logik kawalan borang ditulis dalam kelas komponen, yang mempunyai lebih kawalan atas logik pengesahan dan sesuai untuk jenis borang Kompleks.

Dalam borang dipacu model, medan borang perlu menjadi contoh kelas FormControl Objek contoh boleh mengesahkan nilai dalam medan borang, sama ada nilai telah diubah suai, dsb.

FormGroup

: item borang dalam kumpulan borang

• : kumpulan borang, borang ialah sekurang-kurangnya satu

  FormControl

• : Digunakan untuk borang yang kompleks, yang boleh menambah item borang atau membentuk kumpulan secara dinamik Semasa pengesahan borang, satu item dalam FormGroup gagal dan keseluruhannya gagal FormGroup

• 2.2 Bermula dengan cepatFormArrayFormArray

  Perkenalkan

Buat kawalan borang objek dalam kelas komponen

ReactiveFormsModule Borang templat komponen yang berkaitan

import { ReactiveFormsModule } from "@angular/forms"

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

Dapatkan nilai borangFormGroup

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

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

Tetapkan nilai lalai borang

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

Borang pengumpulan

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

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

2.3

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>

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

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

FormArray2.4 Pengesah borang terbina dalam

Gunakan peraturan pengesahan yang disediakan oleh built- dalam validator untuk mengesahkan medan borang

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>

Dapatkan sama ada keseluruhan borang disahkan atau tidak

Mesej ralat yang dipaparkan dalam templat komponen apabila pengesahan diluluskan

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

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

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

2.5 Pengesah borang disegerakkan tersuai

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

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>

Jenis pengesah tersuai ialah

kelas

mengandungi kaedah pengesahan khusus, yang mestilah kaedah statik

• Kaedah pengesahan

  TypeScript mempunyai parameter

  jenis
. Sebenarnya, ia adalah jenis objek contoh kelas
Jika pengesahan berjaya, kembalikan

• controlAbstractControlFormControlJika pengesahan gagal, kembalikan objek, Atribut dalam objek ialah pengecam pengesahan, dan nilainya ialah

  , yang menunjukkan bahawa pengesahan gagal

• null kaedah pengesahan ialah

• true

• 2.6 Pengesah borang tak segerak tersuaiValidationErrors | null

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

Pintasan untuk mencipta borang.

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

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>

: item borang FormBuilder

: kumpulan borang, borang mestilah sekurang-kurangnya satu

• this.fb.control

: Digunakan untuk borang kompleks, yang boleh menambah item borang atau membentuk kumpulan secara dinamik semasa pengesahan borang, satu item dalam
• gagal dan keseluruhannya gagal

  this.fb.group<.> FormGroup

• 2.8 Latihanthis.fb.arrayFormArray

  Dapatkan nilai yang dipilih dalam set kotak semak

Dapatkan single Nilai yang dipilih dalam marquee

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.9  其他

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

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

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

• reset：表单内容置空

• updateValueAndValidity：对指定输入框 取消校验

validateForm: FormGroup; 

this.validateForm.get('cpwd').updateValueAndValidity();

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

Atas ialah kandungan terperinci Analisis ringkas dua jenis borang dalam Sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!