表单是网页开发中经常用到的组件之一。在 Angular 中，有很多内置的表单组件，可以用来收集和验证数据，比如 input、select、checkbox 等。本文将介绍这些表单组件的使用方法和注意事项。
基本用法
input
input 组件是最常用的表单组件之一，它可以用来收集各种类型的数据，比如文本、数字、布尔值等。在 Angular 中，我们通过 ngModel 指令来实现数据绑定。
<input type="text" [(ngModel)]="name">
在上面的代码中，我们定义了一个 input 组件，用来收集名字数据，然后通过 ngModel 指令将组件和组件所在的组件类中声明的 name 变量进行双向绑定。
select
select 组件用来呈现一个下拉框，用户可以从中选择一个值。在 Angular 中，我们需要使用 ngModel 指令来获取当前选择的值。
<select [(ngModel)]="genre"> <option value="0">请选择</option> <option value="1">动作片</option> <option value="2">喜剧片</option> <option value="3">爱情片</option> </select>
在上面的代码中，我们定义了一个 select 组件，用来让用户选择一个电影类型。当用户选择一个值后，ngModel 指令会将当前选择的值绑定到组件所在的组件类中声明的 genre 变量上。
checkbox
checkbox 组件可以让用户选择一个或多个选项。在 Angular 中，我们同样需要使用 ngModel 指令来实现数据绑定。需要注意的是，当用户选择多个选项时，ngModel 指令会将结果存储在数组中。
-- -------------------- ---- ------- ------- ------ --------------- -------------------- ------------------- --- -------- ------- ------ --------------- -------------------- ------------------- --- -------- ------- ------ --------------- -------------------- -------------------- --- --------展开代码
在上面的代码中，我们定义了三个 checkbox 组件，用来让用户选择一个或多个电影类型。当用户选择一个或多个选项时，ngModel 指令会将结果存储在组件所在的组件类中声明的 genres 变量中。如果用户不选择任何选项，genres 变量会被赋值为 null。
表单验证
在实际开发中，我们通常需要对用户输入的数据进行验证，确保数据的有效性。Angular 提供了很多内置的验证器，比如 required、minLength、maxLength 等。我们可以将这些验证器应用到表单组件中，以确保用户输入的数据符合预期。
required
required 验证器用来确保用户输入的数据不为空。在 Angular 中，我们可以通过在 input 组件上添加 required 属性来启用该验证器。如果用户没有输入数据，验证器会返回一个错误信息。
<input type="text" [(ngModel)]="name" required> <div *ngIf="name.invalid && (name.dirty || name.touched)"> <div *ngIf="name.errors.required"> 名字是必须的 </div> </div>
在上面的代码中，我们定义了一个 input 组件，用来收集名字数据。同时，我们添加了 required 属性，以启用 required 验证器。如果用户没有输入数据，我们会在组件下方显示一个错误信息。
需要注意的是，当用户刚开始访问表单时，表单中的所有数据都是“非法的”，因此表单组件也不会显示任何错误信息。只有当用户开始输入数据时，表单组件才会启用验证器并显示错误信息。
minLength 和 maxLength
minLength 和 maxLength 验证器分别用来确保用户输入的数据不小于或不大于指定长度。在 Angular 中，我们可以通过在 input 组件上添加 minlength 或 maxlength 属性来启用这些验证器。
-- -------------------- ---- ------- ------ ----------- ------------------ ------------- --------------- ---- ------------------- -- ----------- -- --------------- ---- ------------------------------ ----- ------ ---- ------------------------------ ----- ------ ------展开代码
在上面的代码中，我们定义了一个 input 组件，用来收集名字数据。同时，我们添加了 minlength 和 maxlength 属性，以启用 minLength 和 maxLength 验证器。如果用户输入的数据长度不符合要求，我们会在组件下方显示错误信息。
自定义验证器
除了内置的验证器之外，我们还可以自定义验证器，根据我们的具体需求来进行数据验证。自定义验证器可以用来确保数据的格式、范围、一致性等。
import { AbstractControl, ValidatorFn } from '@angular/forms'; export function forbiddenEmailValidator(forbiddenEmail: RegExp): ValidatorFn { return (control: AbstractControl): {[key: string]: any} | null => { const forbidden = forbiddenEmail.test(control.value); return forbidden ? {'forbiddenEmail': {value: control.value}} : null; }; }
在上面的代码中，我们定义了一个自定义验证器，用来确保用户输入的电子邮件地址符合指定的格式。该验证器接受一个正则表达式作为参数，并将其应用到表单组件中。如果用户输入的数据不符合要求，验证器会返回一个错误对象，其中包含验证失败的数据。
在 Angular 中，我们可以将自定义验证器应用到表单组件中，以确保输入数据的有效性。需要注意的是，我们需要在组件类中使用 FormGroup 和 FormControl 类来管理表单数据和验证器。
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ---------- ------------ ---------- - ---- ----------------- ------ - ----------------------- - ---- ------------------------------ ------------ --------- -------------- ------------ --------------------------- ---------- --------------------------- -- ------ ----- ---------------- - ------ ------- -------- ------- ----------- - --- ----------- ------ --- --------------- - -------------------- ----------------- ----------------------------------------- --- -------- --- --------------- - -------------------- ------------------------- ------------------------- -- --- -展开代码
在上面的代码中，我们在组件类中定义了一个 contactForm 实例，用来管理表单数据和验证器。在 email 和 message 控件中，我们应用了内置的验证器和自定义验证器，以确保输入数据的有效性。同时，我们使用 ngSubmit 事件来提交表单数据，将其发送给服务器端。
-- -------------------- ---- ------- ---- -------------------------- ------- -- ------ ------------------------ -------- ---- --------------------------------------- -- -------------------------------- ---- ------------------------------------------------- -------- ------ ---- ---------------------------------------------- ------------ ------ ---- ------------------------------------------------------- ----------- ------ ------ ------- -- --------- ------------------------------------- -------- ---- ----------------------------------------- -- ---------------------------------- ---- --------------------------------------------------- ------ ------ ---- ---------------------------------------------------- ----- ------ ---- ---------------------------------------------------- ----- ------ ------ ------- ------------- -------------------------------- -- --------- ------展开代码
在上面的代码中，我们定义了一个包含 email 和 message 控件的表单。同时，我们监听表单的提交事件，并调用组件类中的 submit 方法来提交表单数据。如果表单数据验证失败，我们会在组件中显示错误信息，告诉用户哪些数据不符合要求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bb13de306f20b3a6a619f1
