在 AngularJS2 中，表单控件是非常重要的一部分，因为它们允许用户输入数据，并且可以对这些数据进行验证。在本篇文章中，我们将讲解如何在 AngularJS2 中使用表单控件与表单验证。
表单控件
表单控件是 AngularJS2 中的一个重要概念，它们允许用户输入数据。在 AngularJS2 中，表单控件有多种类型，包括文本框、下拉框、单选框、多选框等等。
文本框
文本框是表单控件中最常用的一种类型，它允许用户输入文本数据。在 AngularJS2 中，可以使用 input 元素来创建文本框。
<input type="text" [(ngModel)]="username">
在上面的代码中，我们使用了 [(ngModel)] 这个指令来绑定数据模型。username 是一个属性，它的值会自动更新为用户在文本框中输入的值。
下拉框
下拉框也是表单控件中常用的一种类型，它允许用户从预定义的选项中选择一个值。在 AngularJS2 中，可以使用 select 元素来创建下拉框。
<select [(ngModel)]="gender"> <option value="male">Male</option> <option value="female">Female</option> </select>
在上面的代码中，我们使用了 [(ngModel)] 这个指令来绑定数据模型。gender 是一个属性，它的值会自动更新为用户在下拉框中选择的值。
单选框
单选框允许用户在一组选项中选择一个值。在 AngularJS2 中，可以使用 input 元素来创建单选框。
<label><input type="radio" name="gender" value="male" [(ngModel)]="gender"> Male</label> <label><input type="radio" name="gender" value="female" [(ngModel)]="gender"> Female</label>
在上面的代码中，我们使用了 [(ngModel)] 这个指令来绑定数据模型。gender 是一个属性，它的值会自动更新为用户在单选框中选择的值。
多选框
多选框允许用户在一组选项中选择多个值。在 AngularJS2 中，可以使用 input 元素来创建多选框。
<label><input type="checkbox" name="hobby" value="reading" [(ngModel)]="hobbies"> Reading</label> <label><input type="checkbox" name="hobby" value="writing" [(ngModel)]="hobbies"> Writing</label> <label><input type="checkbox" name="hobby" value="swimming" [(ngModel)]="hobbies"> Swimming</label>
在上面的代码中，我们使用了 [(ngModel)] 这个指令来绑定数据模型。hobbies 是一个数组，它的值会自动更新为用户在多选框中选择的值。
表单验证
表单验证是 AngularJS2 中另一个重要的概念，它可以确保用户输入的数据符合预期的格式和要求。在 AngularJS2 中，可以使用内置的验证器或者自定义的验证器来进行表单验证。
内置的验证器
AngularJS2 中内置了一些常用的验证器，例如 required、minlength、maxlength、pattern 等等。可以通过在表单控件上添加相应的属性来启用这些验证器。
<input type="text" name="username" [(ngModel)]="username" required minlength="4" maxlength="10">
在上面的代码中，我们使用了 required、minlength、maxlength 这三个验证器。这意味着用户必须在文本框中输入一个长度在 4 到 10 之间的值，否则表单验证会失败。
自定义的验证器
除了内置的验证器之外，我们还可以编写自定义的验证器来进行表单验证。自定义的验证器是一个函数，它接受一个控件作为参数，并返回一个对象，表示验证结果。
function passwordValidator(control: FormControl): { [key: string]: any } {
const password = control.value;
const hasNumber = /\d/.test(password);
const hasUpper = /[A-Z]/.test(password);
const hasLower = /[a-z]/.test(password);
const valid = hasNumber && hasUpper && hasLower;
return valid ? null : { password: true };
}在上面的代码中，我们编写了一个自定义的验证器，用于验证密码的格式是否正确。这个验证器会检查密码中是否包含数字、大写字母和小写字母，如果都包含则验证通过，否则验证失败。
要使用自定义的验证器，需要在表单控件上添加一个自定义指令，并将这个自定义指令绑定到验证器函数上。
<input type="password" name="password" [(ngModel)]="password" [validatePassword]="true">
在上面的代码中，我们使用了 validatePassword 这个自定义指令，并将它绑定到了一个名为 passwordValidator 的函数上。
示例代码
下面是一个完整的示例代码，演示了如何在 AngularJS2 中使用表单控件与表单验证。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ ---------- ---------- - ---- -----------------
-------- -------------------------- ------------- - ----- -------- --- - -
----- -------- - --------------
----- --------- - --------------------
----- -------- - -----------------------
----- -------- - -----------------------
----- ----- - --------- -- -------- -- ---------
------ ----- - ---- - - --------- ---- --
-
------------
--------- -----------
--------- -
----- ------------------ ------------------------
-----
------------------------
------ ----------- --------------- -------------------------- -------- ------------- ---------------
---- ----------------------------------- -- --------------------------- -- -------------------------------
---- ----------------------------------------------------- -- ---------------
---- ------------------------------------------------------ ---- -- -- ----- - ---------- -----------
---- ------------------------------------------------------ ------ -- ---- ---- -- ---------- -----------
------
------
-----
------------------------
------ --------------- --------------- -------------------------- --------------------------
---- ----------------------------------- -- --------------------------- -- -------------------------------
---- ----------------------------------------------------- ---- ------- -- ----- --- ------- --- --------- ------ --- --- --------- -------------
------
------
-----
----------------------
------- ------------- -------------------------
------- --------------------------
------- ------------------------------
---------
------
-----
-----------------------
------------- --------------- ------------ --------------- -------------------------- ---------------
------------- --------------- ------------ --------------- -------------------------- ---------------
------------- --------------- ------------ ---------------- -------------------------- ----------------
------
------- ------------- -----------------------------------------
-------
--
--
------ ----- ------------ -
----- ----------
------------- -
--------- - --- -----------
--------- --- --------------- --------------------
--------------------
------------------------
-------------------------
----
--------- --- --------------- -------------------
------- --- --------------------
-------- --- ----------------
---
-
---------- -
-----------------------------
-
-在上面的代码中，我们使用了 AngularJS2 中的 Reactive Forms 来创建表单控件，并使用内置的验证器和自定义的验证器来进行表单验证。在表单提交时，我们将表单的值打印到控制台上。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d4dd0fa941bf7134915c76