淺析Angular中兩種類型的Form表單

這篇文章帶大家了解一下Angular中兩種Form表單，簡單介紹一下它們的用法，希望對大家有幫助！

在 Angular 中，表單有兩種類型，分別為範本驅動和模型驅動。 【相關教學推薦：《angular教學》】

1.  模板驅動

##1.1  概述

表單的控制邏輯寫在元件範本中，適合簡單的表單類型

#1.2  快速上手

引入依賴模組

FormsModule

import { FormsModule } from "@angular/forms"

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

將

DOM 表單轉換為ngForm

聲明表單欄位為

ngModel

  
  提交

取得表單欄位值

import { NgForm } from "@angular/forms"

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

表單分組

  

    
  
  

    
  
  提交

1.3  表單驗證

• required#填欄位
• minlength 欄位最小長度
• #maxlength 欄位最大長度
• pattern# 驗證正規例如：pattern="\d" 符合一個數值

  
  提交

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

提交

在元件範本中顯示表單項目未通過時的錯誤訊息

  
  

    
请填写用户名
    
不符合正则规则
  

#指定表單項目未通過驗證時的樣式

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

關聯元件範本中的表單

  
  
  提交

取得表單值

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

  

    
    
  
  
  提交

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

  

    

      
      
      
      删除联系方式
    
  
  添加联系方式
  提交

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

提交

在元件範本中顯示為驗證通過時的錯誤訊息

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

  
  

    
请填写姓名
    

      姓名长度不能大于
      {{ name.errors.maxlength.requiredLength }} 实际填写长度为
      {{ name.errors.maxlength.actualLength }}
    
  

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

  
    
  姓名中不能包含空格
  

2.6  自定義異步表單驗證器

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

export class NameValidators {
  static shouldBeUnique(control: AbstractControl): Promise {
    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
    )
 })

  
用户名重复

正在检测姓名是否重复

2.7  

FormBuilder 建立表單的捷徑。

• this.fb.control

  ：表單項目

• this.fb.group

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

• #this.fb.array

  ：用於複雜表單，可以動態新增表單項目或表單群組，表單驗證時，FormArray 中有一項沒通過，整體沒通過

##2.8  練習

取得一組複選框中選取的值

  
    
    {{ item.name }}
  
  提交

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 = [
    { 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)
  }
}

   Male
   Female
  Submit

2.9  其他

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

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

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

• reset：表单内容置空

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

validateForm: FormGroup; 

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

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

以上是淺析Angular中兩種類型的Form表單的詳細內容。更多資訊請關注PHP中文網其他相關文章！