FormControl Angular 8 中的 URL 验证

在 Angular 8 中，FormControl 是一种基本的表单控件，可以使用它来管理和验证用户输入的数据。其中包括 URL 地址，我们需要确保这些地址符合正确的格式。本文将介绍如何使用 FormControl 来进行 URL 验证。

创建 FormControl

首先，我们需要使用 FormControl 来创建一个 URL 字段的表单控件：

import { FormControl, Validators } from '@angular/forms';

export class MyComponent {
  urlControl = new FormControl('', [
    Validators.required,
    Validators.pattern(/^https?:\/\/[\w\-]+(\.[\w\-]+)+[/#?]?.*$/),
  ]);
}

在上面的示例中，我们创建了一个 urlControl 控件，并设置了两个验证条件。Validators.required 用于检查该字段是否为空，Validators.pattern 用于检查字段是否符合给定的正则表达式。

其中的正则表达式部分是最重要的，它可以用来验证 URL 地址的格式。上述正则表达式允许用户输入http和https协议的URL地址，并确保该地址中包含有效的域名、路径、查询参数以及哈希值。

使用 FormControl 进行验证

一旦我们有了一个 FormControl 控件，我们就可以轻松地在模板中使用它来验证用户输入：

<form [formGroup]="formGroup">
  <label for="urlControl">URL</label>
  <input type="text" id="urlControl" formControlName="urlControl">
  <div *ngIf="urlControl.invalid && (urlControl.dirty || urlControl.touched)">
    <div *ngIf="urlControl.errors.required">URL 不能为空</div>
    <div *ngIf="urlControl.errors.pattern">URL 格式不正确</div>
  </div>
</form>

在上述示例中，我们使用了一个简单的表单，其中 formGroup 是一个 FormGroup 控件，而 urlControl 则是我们在之前创建的 FormControl 控件。

如果用户输入的 URL 地址不符合正确的格式，那么验证错误会显示在页面上，这样用户就可以知道应该输入什么样的内容。

总结

在本文中，我们介绍了如何使用 FormControl 来验证 URL 地址的格式。我们通过创建一个含有正则表达式的 FormControl 控件，并将其与模板中的表单进行关联，来确保用户输入的是正确的格式。

为了自定义验证器，可以在模块级别中使用 NG_VALIDATORS 注入令牌来定义自己的验证器。