Angular表單（一）表單簡介

時間 2020-02-14

原文原文鏈接

Angular 表單

　　angular提供了兩種不一樣的方法來經過表單處理用戶輸入：響應式表單和模板驅動表單。兩者都從視圖中捕獲用戶輸入事件、驗證用戶輸入、建立表單模型、修改數據模型，並提供跟蹤這些更改的途徑。react

　　響應式表單和模板驅動表單在處理和管理表單和表單數據方面有所不一樣，各有優點。編程

　　響應式表單更健壯：可擴展性、可複用性和可測試性更強。（若是表單時應用中的關鍵部分，或者要使用響應式編程模式來構建應用，可使用響應式表單。）
　　模板驅動表單在往應用中添加簡單的表單時很是有用（好比：郵件列表的登記表單），它們很容易添加到應用中，可是不想響應式表單同樣容易擴展。（若是表單需求比較簡單，或者邏輯比較清晰，可使用模板驅動表單）

響應式表單和模板驅動表單的關鍵差別

	響應式	模板驅動
創建（表單模式）	顯示，在組件類中建立	隱私，由組件建立
數據模式	結構化	非結構化
可預測性	同步	異步
表單驗證	函數	指令
可變性	不可變	可變
可伸縮性	訪問底層api	在api之上抽象

響應式表單和模板驅動表單的共同基礎

兩者共享了一些底層構造塊：api

FormControl 實例用於追蹤單個表單控件的值和驗證狀態。
FormGroup 用於追蹤一個表單控件組的值和狀態。
FormArray 用於追蹤表單控件數組的值和狀態。
ControlValueAccessor 用於在Angular的FormControl實例和原生DOM元素之間建立一個橋樑。

創建表單模型

響應式表單和模板驅動表單都是用表單模型來跟蹤Angular表單和表單輸入元素以前值的變化。數組

在響應式表單中創建：

下面是一個帶有輸入字段的組件，它使用響應式表單實現了單個控件。app

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

@Component({
  selector: 'app-reactive-favorite-color',
  template: `
    Favorite Color: <input type="text" [formControl]="favoriteColorControl">
  `
})
export class FavoriteColorComponent {
  favoriteColorControl = new FormControl('');
}

權威數據源負責提供在指定時間點上表單元素的值和狀態。在響應式表單中，表單模式充當權威數據源。上面代碼中的表單模型就是FormControl的實例。異步

reactive forms：響應式表單函數

form control instance：窗體控件實例測試

direct access to FormControl instance after link is created by FormControlDirective:在由FormControlDirective建立連接後直接訪問FormControl實例spa

在響應式表單中，表單模型是顯式定義在組件類中的。而後，響應式表單指令（這裏是FormControlDirective）會把這個現有的表單實例經過數據訪問器（ControlValueAccessories的實例）來指派給視圖中的表單元素。code

在模板驅動表單中創建：

下面是一個帶有輸入字段的組件，使用模板驅動表單實現了單個控件。

import { Component } from '@angular/core';

@Component({
  selector: 'app-template-favorite-color',
  template: `
    Favorite Color: <input type="text" [(ngModel)]="favoriteColor">
  `
})
export class FavoriteColorComponent {
  favoriteColor = '';
}

在模板驅動表單中，權威數據源是模板。

Can only access FormControl instance via NgModal directive:只能經過NgModal指令訪問FormControl實例

表單模型中的抽象促進告終構的簡化。模板驅動表單的NgModal指令負責建立和管理指定表單元素上的表單控件實例，它不那麼明顯，可是沒必要直接操縱表單模型。