如何實現angular中的響應式表單

小編給大家分享一下如何實現angular中的響應式表單，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

響應式表單

Angular 提供了兩種不同的方法來通過表單處理用戶輸入：響應式表單和模板驅動表單。【相關教程推薦：《angular教程》】

• 響應式表單：提供對底層表單對象模型直接、顯式的訪問。它們與模板驅動表單相比，更加健壯。如果表單是你的應用程序的關鍵部分，或者你已經在使用響應式表單來構建應用，那就使用響應式表單。

• 模板驅動表單：依賴模板中的指令來創建和操作底層的對象模型。它們對于向應用添加一個簡單的表單非常有用，比如電子郵件列表注冊表單。

這里只介紹響應式表單，模板驅動表單請參考官網—https://angular.cn/guide/forms-overview#setup-in-template-driven-forms

全局注冊響應式表單模塊 ReactiveFormsModule

要使用響應式表單控件，就要從 @angular/forms 包中導入 ReactiveFormsModule，并把它添加到你的 NgModule 的imports數組中。如下：app.module.ts

/***** app.module.ts *****/
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

添加基礎表單控件 FormControl

使用表單控件有三個步驟。

• 在你的應用中注冊響應式表單模塊。該模塊聲明了一些你要用在響應式表單中的指令。

• 生成一個新的 FormControl 實例，并把它保存在組件中。

• 在模板中注冊這個 FormControl。

要注冊一個表單控件，就要導入FormControl類并創建一個 FormControl的新實例，將其保存為類的屬性。如下：test.component.ts

/***** test.component.ts *****/
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class TestComponent {
	// 可以在 FormControl 的構造函數設置初始值，這個例子中它是空字符串
  name = new FormControl('');
}

然后在模板中注冊該控件，如下：test.component.html

<!-- test.component.html -->
<label>
  Name: <input type="text" [formControl]="name">
</label>
<!-- input 中輸入的值變化的話，這里顯示的值也會跟著變化 -->
<p>name: {{ name.value }}</p>

FormControl 的其它屬性和方法，參閱 API 參考手冊：

https://angular.cn/api/forms/FormControl#formcontrol

把表單控件分組 FormGroup

就像FormControl 的實例能讓你控制單個輸入框所對應的控件一樣，FormGroup 的實例也能跟蹤一組 FormControl 實例（比如一個表單）的表單狀態。當創建 FormGroup 時，其中的每個控件都會根據其名字進行跟蹤。

看下例演示：test.component.ts、test.component.html

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms'

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
    constructor() {}

    profileForm = new FormGroup({
      firstName: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
      lastName: new FormControl('', Validators.required),
    });
	
	onSubmit() {
		// 查看控件組各字段的值
      console.log(this.profileForm.value)
    }
}

<!-- profileForm 這個 FormGroup 通過 FormGroup 指令綁定到了 form 元素，在該模型和表單中的輸入框之間創建了一個通訊層 -->
<!-- FormGroup 指令還會監聽 form 元素發出的 submit 事件，并發出一個 ngSubmit 事件，讓你可以綁定一個回調函數。 -->
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
    <label>
<!-- 由 FormControlName 指令把每個輸入框和 FormGroup 中定義的表單控件 FormControl 綁定起來。這些表單控件會和相應的元素通訊 -->
      First Name: <input type="text" formControlName="firstName">
    </label>
    <label>
      Last Name: <input type="text" formControlName="lastName">
    </label>
    <button type="submit" [disabled]="!profileForm.valid">Submit</button>
  </form>

  <p>{{ profileForm.value }}</p>
  <!-- 控件組的狀態： INVALID 或 VALID -->
  <p>{{ profileForm.status }}</p>	
  <!-- 控件組輸入的值是否為有效值： true 或 false-->
  <p>{{ profileForm.valid }}</p>
  <!-- 是否禁用： true 或 false-->
  <p>{{ profileForm.disabled }}</p>

FormGroup 的其它屬性和方法，參閱 API 參考手冊：

https://angular.cn/api/forms/FormGroup#formgroup

使用更簡單的 FormBuilder 服務生成控件實例

在響應式表單中，當需要與多個表單打交道時，手動創建多個表單控件實例會非常繁瑣。FormBuilder服務提供了一些便捷方法來生成表單控件。FormBuilder在幕后也使用同樣的方式來創建和返回這些實例，只是用起來更簡單。

FormBuilder 是一個可注入的服務提供者，它是由 ReactiveFormModule 提供的。只要把它添加到組件的構造函數中就可以注入這個依賴。

FormBuilder服務有三個方法：control()、group()和 array()。這些方法都是工廠方法，用于在組件類中分別生成FormControl、FormGroup 和 FormArray。

看下例演示：test.component.ts

import { Component } from '@angular/core';
// 1、導入 FormBuilder
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent {
	// 2、注入 FormBuilder 服務
    constructor(private fb: FormBuilder) { }
    ngOnInit() { }

    profileForm = this.fb.group({
      firstName: ['', [Validators.required, Validators.pattern('[a-zA-Z0-9]*')]],
      lastName: ['', Validators.required],
    });
    // 相當于
    // profileForm = new FormGroup({
    //   firstName: new FormControl('', [Validators.required,Validators.pattern('[a-zA-Z0-9]*')]),
    //   lastName: new FormControl('', Validators.required),
    // });

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

對比可以發現，使用FormBuilder服務可以更方便地生成FormControl、FormGroup 和 FormArray，而不必每次都手動new一個新的實例出來。

表單驗證器 Validators

Validators類驗證器的完整API列表，參考API手冊：

https://angular.cn/api/forms/Validators

驗證器（Validators）函數可以是同步函數，也可以是異步函數。

• 同步驗證器：這些同步函數接受一個控件實例，然后返回一組驗證錯誤或 null。你可以在實例化一個 FormControl 時把它作為構造函數的第二個參數傳進去。

• 異步驗證器 ：這些異步函數接受一個控件實例并返回一個 Promise 或 Observable，它稍后會發出一組驗證錯誤或 null。在實例化 FormControl 時，可以把它們作為第三個參數傳入。

出于性能方面的考慮，只有在所有同步驗證器都通過之后，Angular 才會運行異步驗證器。當每一個異步驗證器都執行完之后，才會設置這些驗證錯誤。

驗證器Validators類的API

https://angular.cn/api/forms/Validators

class Validators {
  static min(min: number): ValidatorFn		// 允許輸入的最小數值
  static max(max: number): ValidatorFn		// 最大數值
  static required(control: AbstractControl): ValidationErrors | null	// 是否必填
  static requiredTrue(control: AbstractControl): ValidationErrors | null
  static email(control: AbstractControl): ValidationErrors | null	// 是否為郵箱格式
  static minLength(minLength: number): ValidatorFn		// 最小長度
  static maxLength(maxLength: number): ValidatorFn		// 最大長度
  static pattern(pattern: string | RegExp): ValidatorFn	// 正則匹配
  static nullValidator(control: AbstractControl): ValidationErrors | null	// 什么也不做
  static compose(validators: ValidatorFn[]): ValidatorFn | null
  static composeAsync(validators: AsyncValidatorFn[]): AsyncValidatorFn | null
}

內置驗證器函數

要使用內置驗證器，可以在實例化FormControl控件的時候添加

import { Validators } from '@angular/forms';
...
ngOnInit(): void {
  this.heroForm = new FormGroup({
  // 實例化 FormControl 控件
    name: new FormControl(this.hero.name, [
      Validators.required,	// 驗證，必填
      Validators.minLength(4),	// 長度不小于4
      forbiddenNameValidator(/bob/i) // 自定義驗證器
    ]),
    alterEgo: new FormControl(this.hero.alterEgo),
    power: new FormControl(this.hero.power, Validators.required)
  });
}
get name() { return this.heroForm.get('name'); }

get power() { return this.heroForm.get('power'); }

自定義驗證器

自定義驗證器的內容請參考 API手冊：

https://angular.cn/guide/form-validation

有時候內置的驗證器并不能很好的滿足需求，比如，我們需要對一個表單進行驗證，要求輸入的值只能為某一個數組中的值，而這個數組中的值是隨程序運行實時改變的，這個時候內置的驗證器就無法滿足這個需求，需要創建自定義驗證器。

• 在響應式表單中添加自定義驗證器。在上面內置驗證器一節中有一個forbiddenNameValidator函數如下：

  import { Validators } from '@angular/forms';
  ...
  ngOnInit(): void {
    this.heroForm = new FormGroup({
      name: new FormControl(this.hero.name, [
        Validators.required,
        Validators.minLength(4),
        // 1、添加自定義驗證器
        forbiddenNameValidator(/bob/i)
      ])
    });
  }
  // 2、實現自定義驗證器，功能為禁止輸入帶有 bob 字符串的值
  export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const forbidden = nameRe.test(control.value);
      // 3、在值有效時返回 null，或無效時返回驗證錯誤對象
      return forbidden ? {forbiddenName: {value: control.value}} : null;
    };
  }

  驗證器在值有效時返回 null，或無效時返回驗證錯誤對象。 驗證錯誤對象通常有一個名為驗證秘鑰（forbiddenName）的屬性。其值為一個任意詞典，你可以用來插入錯誤信息（{name}）。

• 在模板驅動表單中添加自定義驗證器。要為模板添加一個指令，該指令包含了 validator 函數。同時，該指令需要把自己注冊成為NG_VALIDATORS的提供者。如下所示：

  // 1、導入相關類
  import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
  import { Input } from '@angular/core'
  
  @Directive({
    selector: '[appForbiddenName]',
    // 2、注冊成為 NG_VALIDATORS 令牌的提供者
    providers: [{provide: NG_VALIDATORS, useExisting: ForbiddenValidatorDirective, multi: true}]
  })
  export class ForbiddenValidatorDirective implements Validator {
    @Input('appForbiddenName') forbiddenName = '';
    // 3、實現 validator 接口，即實現 validate 函數
    validate(control: AbstractControl): ValidationErrors | null {
    	// 在值有效時返回 null，或無效時返回驗證錯誤對象
      return this.forbiddenName ? forbiddenNameValidator(new RegExp(this.forbiddenName, 'i'))(control)
                                : null;
    }
  }
  // 4、自定義驗證函數
  export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
      const forbidden = nameRe.test(control.value);
      // 3、在值有效時返回 null，或無效時返回驗證錯誤對象
      return forbidden ? {forbiddenName: {value: control.value}} : null;
    };
  }

  注意，自定義驗證指令是用 useExisting 而不是 useClass 來實例化的。如果用useClass來代替 useExisting，就會注冊一個新的類實例，而它是沒有forbiddenName 的。

  <input type="text" required appForbiddenName="bob" [(ngModel)]="hero.name">

以上是“如何實現angular中的響應式表單”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！