在 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 中使用表单控件与表单验证。
// www.javascriptcn.com code example
import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
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 };
}
@Component({
selector: 'app-root',
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div>
<label>Username:</label>
<input type="text" name="username" formControlName="username" required minlength="4" maxlength="10">
<div *ngIf="form.get('username').invalid && (form.get('username').dirty || form.get('username').touched)">
<div *ngIf="form.get('username').errors.required">Username is required.</div>
<div *ngIf="form.get('username').errors.minlength">Username must be at least 4 characters long.</div>
<div *ngIf="form.get('username').errors.maxlength">Username cannot be more than 10 characters long.</div>
</div>
</div>
<div>
<label>Password:</label>
<input type="password" name="password" formControlName="password" [validatePassword]="true">
<div *ngIf="form.get('password').invalid && (form.get('password').dirty || form.get('password').touched)">
<div *ngIf="form.get('password').errors.password">Password must contain at least one number, one uppercase letter and one lowercase letter.</div>
</div>
</div>
<div>
<label>Gender:</label>
<select name="gender" formControlName="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div>
<label>Hobbies:</label>
<label><input type="checkbox" name="hobby" value="reading" formControlName="hobbies"> Reading</label>
<label><input type="checkbox" name="hobby" value="writing" formControlName="hobbies"> Writing</label>
<label><input type="checkbox" name="hobby" value="swimming" formControlName="hobbies"> Swimming</label>
</div>
<button type="submit" [disabled]="form.invalid">Submit</button>
</form>
`,
})
export class AppComponent {
form: FormGroup;
constructor() {
this.form = new FormGroup({
username: new FormControl('', Validators.compose([
Validators.required,
Validators.minLength(4),
Validators.maxLength(10),
])),
password: new FormControl('', passwordValidator),
gender: new FormControl('male'),
hobbies: new FormControl([]),
});
}
onSubmit() {
console.log(this.form.value);
}
}在上面的代码中，我们使用了 AngularJS2 中的 Reactive Forms 来创建表单控件，并使用内置的验证器和自定义的验证器来进行表单验证。在表单提交时，我们将表单的值打印到控制台上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d4dd0fa941bf7134915c76