如何在Angular2中制作自定义验证器

加博尔

我正在制作一个自定义验证器,以检查输入的内容是否为有效的电子邮件格式。

这是我的Validator类:

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

export class EmailValidator {

    static getEmailValidator() {
        return function emailValidator(control: FormControl): { [s: string]: boolean } {

            if (!control.value.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)) {
                return {invalidChars: true};
            }
       }
    }
}

我的HTML看起来像这样:

<div class="form-group">

    <input  class="form-control"
            [(ngModel)]="model.email"
            type="text"
            id="name"
            placeholder="Enter your email"
            [formControl]="signupForm.controls['email']"

     >
     <div *ngIf="signupForm.controls['email'].errors?.required&& signupForm.controls['email'].touched"
          class="alert alert-danger">Email is required</div>
     <div *ngIf="signupForm.controls['email'].hasError('invalidChars') && signupForm.controls['email'].touched"
          class="alert alert-danger">Please give a valid email address</div>

我的HTML组件:

export class SignupComponent  {


    signupForm: FormGroup;
    email: AbstractControl;

    model: any = {};
    response: any;


    constructor(fb: FormBuilder, private userService: UserService) {
        this.signupForm = fb.group({
            'email' : ['', Validators.compose([Validators.required, EmailValidator.getEmailValidator()])]

        });
        this.email = this.signupForm.controls['email'];
    }

最后,我得到了一个例外:

Uncaught (in promise): Error: Error in ./SignupComponent class 
SignupComponent - inline template:31:4 caused by: Cannot read property 
'match' of undefined TypeError: Cannot read property 'match' of undefined at
 emailValidator

我的问题是为什么我的匹配项不确定,实现自定义验证器最合适吗?

丹尼尔·迈莲(Daniel Mylian)

因为验证本身看起来不错,错误看起来很像你control.valueundefined因为它是原始的。emailValidator功能更新为以下内容:

static getEmailValidator() { 
    return function emailValidator(control: FormControl): { [s: string]: boolean } {

        if (control.value && !control.value.match(/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/)) {
            return {invalidChars: true};
        }
    }

因此,只有在提供了一个正则表达式的情况下,它才会尝试使用正则表达式测试值。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在C#中制作自定义颜色?

来自分类Dev

如何在FormRequest中添加自定义验证器?

来自分类Dev

如何在CKAN 2.2中定义自定义验证器

来自分类Dev

如何在Angular 2.0中创建自定义验证指令(即验证属性)?

来自分类Dev

如何在Angular2中设置全局自定义标头?

来自分类Dev

如何在Android中制作自定义TextView?

来自分类Dev

Angular2的自定义渲染器

来自分类Dev

在Angular2的自定义验证器中注入服务

来自分类Dev

从Angular2中的自定义验证器访问服务

来自分类Dev

如何在Angular2 / 4/5中实现自定义异步验证器

来自分类Dev

如何在Dart中使用Angular2实现自定义验证器?

来自分类Dev

如何在C#中制作自定义GUI

来自分类Dev

Angular2中的自定义值访问器

来自分类Dev

Angular2自定义验证器未调用

来自分类Dev

如何在Android中制作自定义范围栏?

来自分类Dev

如何在Django中制作自定义装饰器?

来自分类Dev

如何在Flutter中制作自定义按钮形状

来自分类Dev

如何在C#中制作自定义颜色?

来自分类Dev

如何在Wordpress中制作自定义页面

来自分类Dev

Angular2中的自定义值访问器

来自分类Dev

如何编写依赖于Angular2中当前组件的属性值的自定义表单验证器(由模型驱动)

来自分类Dev

如何在Angular2中使用不带ngModel的双向绑定编写自定义指令

来自分类Dev

Angular2自定义验证器未调用

来自分类Dev

Angular2模板驱动的表单:如何为自定义表单控件创建字段验证?

来自分类Dev

如何在Angular2清晰度图标中添加自定义图标?

来自分类Dev

如何在android中制作自定义导航抽屉

来自分类Dev

如何在扩展(自定义)验证器类中动态更改验证错误消息

来自分类Dev

如何在 angular 2+ 中制作自定义加载按钮组件?

来自分类Dev

Angular - 控制器中的自定义验证器功能:如何访问“this”?

Related 相关文章

  1. 1

    如何在C#中制作自定义颜色?

  2. 2

    如何在FormRequest中添加自定义验证器?

  3. 3

    如何在CKAN 2.2中定义自定义验证器

  4. 4

    如何在Angular 2.0中创建自定义验证指令(即验证属性)?

  5. 5

    如何在Angular2中设置全局自定义标头?

  6. 6

    如何在Android中制作自定义TextView?

  7. 7

    Angular2的自定义渲染器

  8. 8

    在Angular2的自定义验证器中注入服务

  9. 9

    从Angular2中的自定义验证器访问服务

  10. 10

    如何在Angular2 / 4/5中实现自定义异步验证器

  11. 11

    如何在Dart中使用Angular2实现自定义验证器?

  12. 12

    如何在C#中制作自定义GUI

  13. 13

    Angular2中的自定义值访问器

  14. 14

    Angular2自定义验证器未调用

  15. 15

    如何在Android中制作自定义范围栏?

  16. 16

    如何在Django中制作自定义装饰器?

  17. 17

    如何在Flutter中制作自定义按钮形状

  18. 18

    如何在C#中制作自定义颜色?

  19. 19

    如何在Wordpress中制作自定义页面

  20. 20

    Angular2中的自定义值访问器

  21. 21

    如何编写依赖于Angular2中当前组件的属性值的自定义表单验证器(由模型驱动)

  22. 22

    如何在Angular2中使用不带ngModel的双向绑定编写自定义指令

  23. 23

    Angular2自定义验证器未调用

  24. 24

    Angular2模板驱动的表单:如何为自定义表单控件创建字段验证?

  25. 25

    如何在Angular2清晰度图标中添加自定义图标?

  26. 26

    如何在android中制作自定义导航抽屉

  27. 27

    如何在扩展(自定义)验证器类中动态更改验证错误消息

  28. 28

    如何在 angular 2+ 中制作自定义加载按钮组件?

  29. 29

    Angular - 控制器中的自定义验证器功能:如何访问“this”?

热门标签

归档