Angular2表单自定义验证器的实现

本文将向大家介绍如何在Angular 2中实现自定义表单验证器，对于想要深入了解这一技术细节的朋友们来说，具有参考与借鉴的价值。

让我们先明确目标：我们想要实现一个用于验证手机号的验证器。基于之前的用户信息输入表单示例，我们将在手机号输入字段上添加这个验证器。如果手机号验证失败，将显示一个错误提示。

要开始这个项目，可以从GitHub获取相关代码。进入项目目录后，运行以下命令安装依赖并启动测试服务器：

```bash

cd angular2-forms-tutorial

git checkout model-driven 检出本文所使用的tag

npm install

npm start

```

接下来，我们来详细如何实现这个验证器。

在Angular 2中，实现一个验证器非常简单。本质上，验证器就是一个方法，它接受一个FormControl作为参数，并返回一个错误对象或者null。在TypeScript中，我们可以这样定义验证器的接口：

```typescript

interface Validator {

(c: T): {[error: string]: any};

}

```

如果你熟悉Java等面向对象语言，上面的接口定义应该很容易理解。这里使用了泛型T，它继承自FormControl。方法参数c的类型为T，这个方法返回一个对象。

我们创建一个名为`mobile.validator.ts`的文件，内容如下：

```typescript

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

export function validateMobile(c: FormControl) {

const MOBILE_REGEXP = /^1[0-9]{10,10}$/;

return MOBILE_REGEXP.test(c.value) ? null : { validateMobile: { valid: false } };

}

```

在这个验证方法中，我们使用正则表达式来判断输入的手机号码是否合法。如果不合法，就返回一个对象，该对象以验证器的名字（这里是`validateMobile`）作为键，并设置其有效值为`false`。

在之前的教程中，我们通过检查表单控件的`errors`属性来获取验证器的验证结果。例如：

```html

必须输入电话

```

在这个例子中，`userForm.controls.mobile`是表单中的手机号控件，`required`是`required`验证器对应的key。当`required`验证器验证失败时，会在`errors`里面添加一个值：

```json

{

"required": { "valid": false }

}

```

我们实现的自定义验证器也需要遵循这个格式，将验证结果以验证器的名字作为key，放到`errors`里面。这样，我们就可以在页面中用与之前相同的方式来获取这个验证器的验证结果。

相信大家对Angular 2表单自定义验证器的实现有了更深入的了解。感兴趣的朋友可以进一步和实践，以实现更复杂的表单验证需求。接下来，让我们一起将验证器融入我们的表单中，特别是在模型驱动的表单里。

我们从引入一个先前已实现的验证器开始。这个验证器专门用于验证手机号码格式。在ReactiveFormsComponent类中，我们创建了一个表单组，其中包含了各种表单控件，其中一个就是用于输入手机号的“mobile”控件。这个控件已经附加了多个验证器，包括我们刚刚引入的自定义手机号格式验证器。

以下是相关代码段：

```typescript

import { validateMobile } from '../validators/mobile.validator';

export class ReactiveFormsComponent implements OnInit {

this.userForm = this.formBuilder.group({

// ... 其他控件

mobile: [, [Validators.required, Validators.minLength(11), Validators.maxLength(11), validateMobile]]

});

// ...

}

```

当表单提交后，如果手机号不符合预设的验证规则，我们的前端页面就会显示相应的错误信息。例如，如果手机号格式不正确，页面上就会显示“电话号码格式不正确”。

然后，我们转向模板驱动的表单。如果表单不是通过组件以模型驱动的方式创建，而是在页面上用HTML元素创建，那么使用自定义验证器的方式就会有所不同。在这种情况下，我们需要在HTML元素上直接添加验证器。除了HTML自带的验证器（如required、minlength、maxlength），我们还可以添加自定义的验证器。

我们的自定义验证器需要被定义为一个指令（Directive）。Angular在HTML时，会识别并应用这些自定义验证器指令。我们还需要确保Angular的验证器框架能够调用我们的验证方法。我们需要在指令定义中添加NG_VALIDATORS。

以下是相关代码段：

```typescript

@Directive({

selector: '[validateMobile][ngModel]',

providers: [

{ provide: NG_VALIDATORS, useValue: validateMobile, multi: true }

]

})

export class MobileValidatorDirective {}

```

这个指令可以被添加到任何带有`validateMobile`和`ngModel`属性的HTML输入元素上。当用户在输入框中输入内容时，我们的自定义验证器就会开始工作，确保输入的内容符合我们的验证规则。如果输入内容不符合规则，页面上就会显示相应的错误信息。

为了让这个新的指令在AppModule中生效，我们需要将其添加到AppModule的declarations里。这样，我们就可以在页面的任何位置使用这个自定义验证器了。

无论是在模型驱动还是模板驱动的表单中，添加自定义验证器都需要我们理解并遵循Angular的验证机制。只有这样，我们才能确保用户输入的数据符合我们的预期和要求。在网页开发中，验证器扮演着至关重要的角色。特别是在处理用户输入时，一个有效的验证器能够确保数据的准确性和完整性。下面，我们将如何在Angular 2中创建一个自定义的表单验证器。

在页面的某个部分，你可能会遇到一个文本输入框，它专门用于接收用户的手机号码。这个输入框的验证器代码是这样的：

```html

```

这个输入框使用了Angular的ngModel绑定，并设置了几个验证规则。`required`表示这个字段是必填的，`minlength`和`maxlength`则限定输入长度为11位。而`validateMobile`则是一个自定义验证器，用于检查输入的手机号码格式是否正确。

对于验证结果的展示，我们可以这样设计：

```html

有效

```

如果验证通过，将显示“有效”；否则，将根据具体的错误类型展示相应的错误信息。比如，如果手机号长度不是11位，或者没有输入，或者格式不正确，都会显示相应的错误信息。

这是长沙网络推广为我们介绍的Angular 2表单自定义验证器的使用方法。希望这个例子能够帮助你更好地理解如何在Angular 2中创建自定义验证器。如果你有任何疑问，欢迎留言，长沙网络推广团队会及时回复你的。也感谢大家对狼蚁SEO网站的支持。在页面的最后部分，我们可以使用Cambrian的render方法来渲染主体内容：

```javascript

cambrian.render('body');

```

这将把页面的主体部分呈现给用户，确保内容的完整性和一致性。在开发过程中，验证器的作用不可忽视，它们能够大大提高数据输入的准确性，提升用户体验。