angular的兩種類型表單是什么

這篇“angular的兩種類型表單是什么”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“angular的兩種類型表單是什么”文章吧。

成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)的開(kāi)發(fā)，更需要了解用戶，從用戶角度來(lái)建設(shè)網(wǎng)站，獲得較好的用戶體驗(yàn)。創(chuàng)新互聯(lián)多年互聯(lián)網(wǎng)經(jīng)驗(yàn)，見(jiàn)的多，溝通容易、能幫助客戶提出的運(yùn)營(yíng)建議。作為成都一家網(wǎng)絡(luò)公司，打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇創(chuàng)新互聯(lián)，不只是建站，我們把建站作為產(chǎn)品，不斷的更新、完善，讓每位來(lái)訪用戶感受到浩方產(chǎn)品的價(jià)值服務(wù)。

angular的兩種類型表單是什么

在 Angular 中，表單有兩種類型，分別為模板驅(qū)動(dòng)和模型驅(qū)動(dòng)。

一、模板驅(qū)動(dòng)

1.1 概述

表單的控制邏輯寫(xiě)在組件模板中，適合簡(jiǎn)單的表單類型。

1.2 快速上手

1）、引入依賴模塊 FormsModule

import { FormsModule } from "@angular/forms"

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

2）、將 DOM 表單轉(zhuǎn)換為 ngForm

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

3）、聲明表單字段為 ngModel

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

4）、獲取表單字段值

import { NgForm } from "@angular/forms"

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

5）、表單分組

<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 表單驗(yàn)證

  • required 必填字段

  • minlength 字段最小長(zhǎng)度

  • maxlength 字段最大長(zhǎng)度

  • pattern 驗(yàn)證正則 例如：pattern=“\d” 匹配一個(gè)數(shù)值

<form #f="ngForm" (submit)="onSubmit(f)">
  <input type="text" name="username" ngModel required pattern="\d" />
  <button>提交</button>
</form>
export class AppComponent {
  onSubmit(form: NgForm) {
    // 查看表單整體是否驗(yàn)證通過(guò)
    console.log(form.valid)
  }
}
<!-- 表單整體未通過(guò)驗(yàn)證時(shí)禁用提交表單 -->
<button type="submit" [disabled]="f.invalid">提交</button>

在組件模板中顯示表單項(xiàng)未通過(guò)時(shí)的錯(cuò)誤信息。

<form #f="ngForm" (submit)="onSubmit(f)">
  <input #username="ngModel" />
  <div *ngIf="username.touched && !username.valid && username.errors">
    <div *ngIf="username.errors.required">請(qǐng)?zhí)顚?xiě)用戶名</div>
    <div *ngIf="username.errors.pattern">不符合正則規(guī)則</div>
  </div>
</form>

指定表單項(xiàng)未通過(guò)驗(yàn)證時(shí)的樣式。

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

二、模型驅(qū)動(dòng)

2.1 概述

表單的控制邏輯寫(xiě)在組件類中，對(duì)驗(yàn)證邏輯擁有更多的控制權(quán)，適合復(fù)雜的表單的類型。

在模型驅(qū)動(dòng)表單中，表單字段需要是 FormControl類的實(shí)例，實(shí)例對(duì)象可以驗(yàn)證表單字段中的值，值是否被修改過(guò)等等

angular的兩種類型表單是什么
一組表單字段構(gòu)成整個(gè)表單，整個(gè)表單需要是 FormGroup 類的實(shí)例，它可以對(duì)表單進(jìn)行整體驗(yàn)證。

angular的兩種類型表單是什么

  • FormControl：表單組中的一個(gè)表單項(xiàng)

  • FormGroup：表單組，表單至少是一個(gè) FormGroup

  • FormArray：用于復(fù)雜表單，可以動(dòng)態(tài)添加表單項(xiàng)或表單組，在表單驗(yàn)證時(shí)，F(xiàn)ormArray 中有一項(xiàng)沒(méi)通過(guò)，整體沒(méi)通過(guò)。

2.2 快速上手

1）、引入 ReactiveFormsModule

import { ReactiveFormsModule } from "@angular/forms"

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

2）、在組件類中創(chuàng)建 FormGroup 表單控制對(duì)象

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

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

3）、關(guān)聯(lián)組件模板中的表單

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

4）、獲取表單值

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

5）、設(shè)置表單默認(rèn)值

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

6）、表單分組

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

需求：在頁(yè)面中默認(rèn)顯示一組聯(lián)系方式，通過(guò)點(diǎn)擊按鈕可以添加更多聯(lián)系方式組。

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
  }

  // 添加聯(lián)系方式
  addContact() {
    // 聯(lián)系方式
    const myContact: FormGroup = new FormGroup({
      name: new FormControl(),
      address: new FormControl(),
      phone: new FormControl()
    })
    // 向聯(lián)系方式數(shù)組中添加聯(lián)系方式
    this.contacts.push(myContact)
  }

  // 刪除聯(lián)系方式
  removeContact(i: number) {
    this.contacts.removeAt(i)
  }

  ngOnInit() {
    // 添加默認(rèn)的聯(lián)系方式
    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)">刪除聯(lián)系方式</button>
    </div>
  </div>
  <button (click)="addContact()">添加聯(lián)系方式</button>
  <button>提交</button>
</form>

2.4 內(nèi)置表單驗(yàn)證器

1）、使用內(nèi)置驗(yàn)證器提供的驗(yàn)證規(guī)則驗(yàn)證表單字段

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

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

2）、獲取整體表單是否驗(yàn)證通過(guò)

onSubmit() {
  console.log(this.contactForm.valid)
}
<!-- 表單整體未驗(yàn)證通過(guò)時(shí)禁用表單按鈕 -->
<button [disabled]="contactForm.invalid">提交</button>

3）、在組件模板中顯示為驗(yàn)證通過(guò)時(shí)的錯(cuò)誤信息

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">請(qǐng)?zhí)顚?xiě)姓名</div>
    <div *ngIf="name.errors.maxlength">
      姓名長(zhǎng)度不能大于
      {{ name.errors.maxlength.requiredLength }} 實(shí)際填寫(xiě)長(zhǎng)度為
      {{ name.errors.maxlength.actualLength }}
    </div>
  </div>
</form>

2.5 自定義同步表單驗(yàn)證器

  • 自定義驗(yàn)證器的類型是 TypeScript 類

  • 類中包含具體的驗(yàn)證方法，驗(yàn)證方法必須為靜態(tài)方法

  • 驗(yàn)證方法有一個(gè)參數(shù) control，類型為 AbstractControl。其實(shí)就是 FormControl 類的實(shí)例對(duì)象的類型

  • 如果驗(yàn)證成功，返回 null

  • 如果驗(yàn)證失敗，返回對(duì)象，對(duì)象中的屬性即為驗(yàn)證標(biāo)識(shí)，值為 true，標(biāo)識(shí)該項(xiàng)驗(yàn)證失敗

  • 驗(yàn)證方法的返回值為 ValidationErrors | null

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

export class NameValidators {
  // 字段值中不能包含空格
  static cannotContainSpace(control: AbstractControl): ValidationErrors | null {
    // 驗(yàn)證未通過(guò)
    if (/\s/.test(control.value)) return { cannotContainSpace: true }
    // 驗(yàn)證通過(guò)
    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 自定義異步表單驗(yàn)證器

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">用戶名重復(fù)</div>
</div>
<div *ngIf="name.pending">正在檢測(cè)姓名是否重復(fù)</div>

2.7 FormBuilder

創(chuàng)建表單的快捷方式。

  • this.fb.control：表單項(xiàng)

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

  • this.fb.array：用于復(fù)雜表單，可以動(dòng)態(tài)添加表單項(xiàng)或表單組，在表單驗(yàn)證時(shí)，F(xiàn)ormArray 中有一項(xiàng)沒(méi)通過(guò)，整體沒(méi)通過(guò)。

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 監(jiān)聽(tīng)表單值的變化

實(shí)際工作中，我們常常需要根據(jù)某個(gè)表單值得變化而進(jìn)行相應(yīng)的處理，一般可以使用ngModalChange或者表單來(lái)實(shí)現(xiàn)

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 練習(xí)

1）、獲取一組復(fù)選框中選中的值

<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：設(shè)置表單控件的值（可以設(shè)置全部，也可以設(shè)置其中某一個(gè)，其他不受影響）

  • setValue：設(shè)置表單控件的值 (設(shè)置全部，不能排除任何一個(gè))

  • valueChanges：當(dāng)表單控件的值發(fā)生變化時(shí)被觸發(fā)的事件

  • reset：表單內(nèi)容置空

以上就是關(guān)于“angular的兩種類型表單是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：angular的兩種類型表單是什么
網(wǎng)址分享：http://muchs.cn/article30/jehhpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化、用戶體驗(yàn)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司