angular響應式表單

在使用ng-zorro的表單時，發現他和angular的表單有很大不同，於是就去學習了一下angular的表單。

在angular中表單有兩種形式，一種是模板驅動表單，一種是響應式表單，模板驅動表單跟angularjs的表單差不多，都是在模板中進行資料繫結，驗證等，而響應式表單是功能更強大，靈活的表單形式。

響應式表單是用模型驅動來處理表單與使用者互動的，在響應式表單中每個表單控制項都是乙個模型。使用響應式表單時，需要在匯入@angular/forms 包中匯入 reactiveformsmodule並在模組中加入imports陣列中.

在元件類中匯入formcontrol類,建立乙個fromcontrol類例項，他將關聯到表單中的乙個控制項.

之後在模板中用fromcontrol指令把模板中表單控制項關聯到name物件:``

這個時候我們的name物件就關聯到了模板中的input表單控制項了,用name.value屬性就可以看到物件的值，他是與檢視值繫結在一起的.此時這個input控制項就由name這個模型管理，獲取值，修改值，驗證都通過這個模型進行.

在表單中，通常有多個控制項,把多個控制項合併在一起有助於管理，可以用formgroup來管理控制項formcontrl.

從@angular/forms包中匯入formgroup,新建乙個formgroup物件，在建構函式中傳入乙個物件，屬性名代表控制項的名字，值就是乙個formcontrl例項.

在模板的表單中用formgroup指令來關聯模型，由 formcontrolname指令提供的formcontrolname屬性把每個輸入框和 formgroup 中定義的表單控制項繫結起來。這樣在檢視表單控制項值修改時，會反應到formgroup上.

因為表單使用很頻繁，手動建立多個表單控制項會非常繁瑣，可以使用formbuilder服務來簡化建立過程:

匯入@angular/forms 包中匯入 formbuilder類,在建構函式中注入服務，使用服務方法來簡化生成過程:

constructor(private fb: formbuilder)

生成對比:

name = new formcontrol('');
buildername = this.fb.control('');
teacher = new formgroup();
builderteacher = this.fb.group();

在之前使用angularjs開發時，很多表單都很相似，但是卻不得不寫多個相似的表單，使用響應式表單可以將這些表單都抽象出來，動態生成表單，使得不用寫重複的**，而且更易於維護。

先比較這兩個控制項,乙個input乙個select下拉框:

這兩個控制項有很多的共同點,他們都是html標籤,都有乙個label,乙個id,乙個formcontrolname,乙個type,且控制項都有值(.value),只是他們的值都是不同的,可以把這兩個控制項抽象成乙個基類物件,他有id,lable,html標籤型別,value屬性，在通過繼承基類物件生成對應的控制項.

基類物件

value: t;                 //控制項的值    
key: string; //控制項名字
label: string; //控制項描述
controltype: string; //html標籤型別
constructor(options: = {})

input物件

import  from './base-ob';
export class inputtext extends baseob = {}) 
}

通過繼承baseob物件，並宣告自己為input(html型別),加上乙個type(text)

select物件:

import  from './base-ob';
export class select extends baseob = ;
constructor(options: {} = {}) 
}

select不需要type型別，但他需要乙個options來迴圈生成下拉框

我們需要把這個input和select轉化為乙個formgroup來與模板檢視互動,因此需要乙個服務把baseob陣列轉化為乙個formgroup物件：

import  from '@angular/core';
import from './base-ob';
import from '@angular/forms';
@injectable()
export class baseobservice 
toformgroup(obs: baseob ) ;
obs.foreach(ob => );
return new formgroup(group); // 將物件傳入formgroup建構函式生成formgroup
}}

有了模型物件，就得把模型物件轉化為之前的檢視，用乙個元件來做這件事:

import  from '@angular/core';
import from '../base-ob';
import from '@angular/forms';
@component()
export class elementcomponent implements oninit 
ngoninit() 
}

這個元件類首先接受乙個抽象的基類物件和乙個formgoup,用input()獲取,然後再在模板中根據element生成相應的控制項:

}}

用ngswitch來判斷,如果當前的控制項html屬性為input顯示,為select顯示,其餘如此.

可以用服務來生成baseob物件陣列來定義我們需要的表單控制項，驗證資訊也可以通過這樣類似的方法生成，只需要提供表單控制項各自的屬性，統一生成表單控制項，便於維護和編寫。

Angular 響應式表單之表單分組

表單提交，表單全部校驗成功才能提交，當表單校驗錯誤，表單邊框變紅，同時有錯誤提示資訊，有重置功能 git倉庫在分析之前，首先明確 formcontrol formcontrol formcontrolname formgroup formgroup formgroupname formarray...

angular響應式表單

Angular 響應式表單之表單分組

Angular 響應式表單之表單分組

Angular 響應式表單之表單分組

相關推薦