Angular 实现验证器

在Angular中，验证器是指验证表单中输入的值是否有效的类。在这个主题中，我们将介绍如何在Angular中实现验证器。

安装Angular

首先，你需要安装Angular CLI。你可以在 Angular官方网站 找到安装指南。

创建Angular应用

安装完Angular CLI后，可以通过 ng new 命令创建一个新的Angular应用。例如：

ng new my-app

该命令将创建一个名为“my-app”的新Angular应用。

创建表单

在这个主题中，我们将创建一个表单，其中包含一些需要验证的输入字段。

首先，在 app.module.ts 中导入 FormsModule 以支持表单，并将该模块添加到 imports 数组中。

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

接着，在 app.component.html 中添加一个表单，并实现一些输入字段。例如：

<form>
  <label>
    Email:
    <input type="email" name="email" [(ngModel)]="email" required>
  </label>
  <br>
  <label>
    Password:
    <input type="password" name="password" [(ngModel)]="password" required>
  </label>
  <br>
  <button type="submit">Submit</button>
</form>

在这个表单中，我们添加了一个名为“email”的输入字段和一个名为“password”的输入字段。

注意这两个字段都被标记为“required”，这意味着用户必须填写它们，否则表单无法提交。

创建验证器

接下来，我们将创建一个验证器来验证表单中输入字段的有效性。在这个例子中，我们将创建一个自定义验证器，以确保密码包含至少一个大写字母和一个数字。

首先，在 app.component.ts 中导入 Validator 和 AbstractControl。

import { Component } from '@angular/core';
import { Validator, AbstractControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements Validator {
  ...
}

接着，实现 validate 函数来执行实际验证逻辑。代码如下：

validate(control: AbstractControl): { [key: string]: any } {
  const passwordRegex = /^(?=.*[A-Z])(?=.*\d).*$/;
  const valid = passwordRegex.test(control.value);
  return valid ? null : { invalidPassword: true };
}

在这个函数中，我们首先定义密码的正则表达式。然后，我们通过 test 函数将该正则表达式应用于输入控件的值，以确定密码是否包含至少一个大写字母和一个数字。

如果验证通过，我们返回 null。否则，我们返回一个名为“invalidPassword”的对象，该对象表示密码无效。

将验证器应用到表单中的字段

现在我们已经创建了一个验证器，我们需要将它应用到表单中实际的字段上。

在 app.component.ts 中，向 AppComponent 类添加以下代码：

get passwordControl(): AbstractControl {
  return this.form.get('password');
}

ngOnInit() {
  this.form = new FormGroup({
    email: new FormControl('', [
      Validators.required,
      Validators.email
    ]),
    password: new FormControl('', [
      Validators.required,
      this.validate.bind(this)
    ])
  });
}

在这个代码中，我们首先定义了一个名为“passwordControl”的函数，它返回表单中名称为“password”的输入控件的 父级。然后，我们在 ngOnInit 函数中初始化表单，并将自定义验证器应用到密码控件上。我们使用 validate.bind(this) 来确保验证器内部的 this 引用指向 AppComponent 类本身。

最后，在 app.component.html 中将 form 绑定到表单上：

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  ...
</form>

这样，当用户提交表单时，我们的自定义验证器将验证输入的密码值是否有效，并返回相应的错误消息。

结论

在这个主题中，我们介绍了如何在Angular中实现验证器。我们创建了一个自定义验证器，以确保表单中输入的密码包含至少一个大写字母和一个数字。通过这个例子，我们可以了解如何创建和应用验证器来验证表单中的输入字段的有效性。

代码片段

以下是完整的示例代码：

import { Component } from '@angular/core';
import { Validator, AbstractControl, Validators, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements Validator {

  form: FormGroup;

  email: string;
  password: string;

  get passwordControl(): AbstractControl {
    return this.form.get('password');
  }

  validate(control: AbstractControl): { [key: string]: any } {
    const passwordRegex = /^(?=.*[A-Z])(?=.*\d).*$/;
    const valid = passwordRegex.test(control.value);
    return valid ? null : { invalidPassword: true };
  }

  ngOnInit() {
    this.form = new FormGroup({
      email: new FormControl('', [
        Validators.required,
        Validators.email
      ]),
      password: new FormControl('', [
        Validators.required,
        this.validate.bind(this)
      ])
    });
  }

  onSubmit() {
    alert('Form submitted!');
  }

}