Angular中Form表單的兩種類型是怎樣的

這篇文章將為大家詳細講解有關Angular中Form表單的兩種類型是怎樣的，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

在 Angular 中，表單有兩種類型，分別為模板驅動和模型驅動。

1.  模板驅動

1.1  概述

表單的控制邏輯寫在組件模板中，適合簡單的表單類型

1.2  快速上手

引入依賴模塊 FormsModule

import { FormsModule } from "@angular/forms"

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

將 DOM 表單轉換為 ngForm

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

聲明表單字段為 ngModel

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

獲取表單字段值

import { NgForm } from "@angular/forms"

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

表單分組

<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  表單驗證

• required 必填字段

• minlength 字段最小長度

• maxlength 字段最大長度

• pattern 驗證正則 例如：pattern="\d" 匹配一個數值

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

在組件模板中顯示表單項未通過時的錯誤信息

<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-invalid {
  border: 2px solid red;
}

2.  模型驅動

2.1  概述

表單的控制邏輯寫在組件類中，對驗證邏輯擁有更多的控制權，適合復雜的表單的類型。

在模型驅動表單中，表單字段需要是 FormControl 類的實例，實例對象可以驗證表單字段中的值，值是否被修改過等等

一組表單字段構成整個表單，整個表單需要是 FormGroup 類的實例，它可以對表單進行整體驗證

• FormControl：表單組中的一個表單項

• FormGroup：表單組，表單至少是一個 FormGroup

• FormArray：用于復雜表單，可以動態添加表單項或表單組，在表單驗證時，FormArray 中有一項沒通過，整體沒通過

2.2  快速上手

引入 ReactiveFormsModule

import { ReactiveFormsModule } from "@angular/forms"

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

在組件類中創建 FormGroup 表單控制對象

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

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

關聯組件模板中的表單

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

獲取表單值

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

設置表單默認值

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

表單分組

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

需求：在頁面中默認顯示一組聯系方式，通過點擊按鈕可以添加更多聯系方式組

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  內置表單驗證器

使用內置驗證器提供的驗證規則驗證表單字段

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

<!-- 表單整體未驗證通過時禁用表單按鈕 -->
<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>

2.5  自定義同步表單驗證器

• 自定義驗證器的類型是 TypeScript 類

• 類中包含具體的驗證方法，驗證方法必須為靜態方法

• 驗證方法有一個參數 control，類型為 AbstractControl。其實就是 FormControl 類的實例對象的類型

• 如果驗證成功，返回 null

• 如果驗證失敗，返回對象，對象中的屬性即為驗證標識，值為 true，標識該項驗證失敗

• 驗證方法的返回值為 ValidationErrors | 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.6  自定義異步表單驗證器

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>

2.7  FormBuilder

創建表單的快捷方式。

• this.fb.control：表單項

• this.fb.group：表單組，表單至少是一個 FormGroup

• this.fb.array：用于復雜表單，可以動態添加表單項或表單組，在表單驗證時，FormArray 中有一項沒通過，整體沒通過

2.8  練習

獲取一組復選框中選中的值

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

獲取單選框中選中的值

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();

關于Angular中Form表單的兩種類型是怎樣的就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。