Angular 表單快速入門

（一）建立乙個輸入框

對於響應式表單，需要先在元件類中定義表單模型，然後用 [formcontrol] 指令讓它與檢視中的表單元素聯絡起來。我們可以在 formcontrol 例項定義時設定 value，也可以在之後使用 setvalue 方法設定。當檢視中的表單控制項內容變化時，這個例項也會跟著變化。下面我們以乙個輸入框為例來看一下這兩者之間的聯絡：

import  from '@angular/core';

import  from '@angular/forms';
@component(}

}

（二）新增驗證規則

在響應式表單中，我們直接把驗證器函式新增到表單控制項模型上。一旦控制項發生了變化，angular 就會呼叫這些函式。當使用者輸入沒有通過驗證時，我們可以通過例項物件的 errors 屬性來獲取具體的有效性狀態，同時輸入框上的樣式名會發生變化。我們以 required 和 maxlength 為例：

import  from '@angular/core';

import  from '@angular/forms';
@component(
input.ng-invalid 
span 
`],})  username = new formcontrol('', [validators.required, validators.maxlength(10)]);
}

響應式表單提供了 formgroup 用於跟蹤一組 formcontrol 例項的值和有效性狀態。formgroup 的 key 就是每個子控制項的名稱，通過 [formcontrolname] 指令與檢視中的表單元素關聯。formgroup 例項擁有和 formcontrol 例項相同的屬性和方法，當然這些屬性和方法作用於這個表單組中的每個表單控制項。下面我們來建立乙個表單組：

import  from '@angular/core';

import  from '@angular/forms';
@component(}

form valid: }

});}

（四）對表單控制項進行分組

表單組可以同時接受單個表單控制項例項和其它表單組例項作為其子控制項。簡單地說就是 formgroup 例項中可以巢狀 formgroup 例項或者 formarray 例項，形成巢狀的表單組。

import  from '@angular/core';

import  from '@angular/forms';
@component(}

form valid: }

});}

（五）使用 formbuilder 服務生成控制項

當我們需要建立多個表單控制項例項時，**會顯得會比較臃腫。formbuilder 提供了乙個語法糖，以簡化 formcontrol、formgroup 或 formarray 例項的建立過程。下面我們用它來重構一下上面的表單建立：

userinfo = this.fb.group(),

password: ['', [validators.required, validators.pattern(/^[\d]$/)]],

});constructor(private fb: formbuilder) {}

}（一）建立乙個輸入框

模板驅動表單和 angularjs 中的表單相似，通過 ngmodel 指令來實現雙向繫結。

import  from '@angular/core';

@component(}

}

（二）新增驗證規則

在模板驅動表單中只能通過屬性新增驗證規則，就像原生的 html 表單驗證器。我們需要先把 ngmodel 匯出成區域性模板變數才能檢視該控制項的狀態。 比如下面這個例子：

import  from '@angular/core';

@component(
input.ng-invalid 
span 
`],})  username = '';
}

在使用 form 標籤後，其中通過 ngmodel 指令雙向繫結的表單控制項必須新增 name 屬性。同 ngmodel，我們可以通過把 ngform 匯出成區域性模板變數來檢視表單的狀態。

import  from '@angular/core';

@component(}

form valid: }

}

（四）對表單控制項進行分組

在模板驅動表單中對表單控制項進行分組需要使用 ngmodelgroup 指令。該指令只能用作 ngform 的子級（在

form value: }

form valid: }

styles: [`

form, .form-group

.form-group

input

input.ng-invalid

span

`],}) username = ;

password = '';

}

Angular入門 表單非同步驗證

formbuilder其實就是乙個可以快速生成表單控制項的工具，匯入該類之後可以通過this.fb.group方法快速建立乙個formgroup，例如 export class profileeditorcomponent 其中每一項都是乙個formcontrol，需要在html中使用formcon...

Angular表單驗證

對前端開發人員來說，表單是非常重要的，它負責使用者與程式的互動。它承載著一部分資料校驗的功能，以此減少服務端的壓力。本文就angular表單驗證的兩種方式進行闡述，如有問題，歡迎指正。文章目錄 模板驅動驗證 響應式表單的驗證 自定義驗證器 為了向模板驅動表單中新增驗證，需要新增一些驗證屬性，這裡就使...

Angular 表單簡介

angular 中有兩種表單 元件類指令 formsmodule 元件類指令 reactiveformsmodule validity visited html form template driven formreactive form接下來我們主要來介紹一下 reactive form 的一些相...