如何验证角度 2 中的可选字段？答案

【问题标题】：How to validate optional field in angular 2?如何验证角度 2 中的可选字段？
【发布时间】：2017-12-28 20:41:27
【问题描述】：

我有一个可选的电子邮件字段，但如果有值应该匹配电子邮件模式？

如果表单有很多可选字段，比如网站、电话等呢？

顺便说一下，我正在使用 FormBuilder、FormGroup、Validators 表单 @angular/forms

【问题讨论】：

空值不是电子邮件 :) 网站验证怎么样，你也有 html5 类型 :)
您正在使用响应式表单，因此您可以根据需要使用setValidators/clearValidators/updateValueandValidity向表单控件添加和删除验证器
将尝试这些选项，谢谢
一些相关信息：angular.io/api/forms/AbstractControl

标签： angular validation

【解决方案1】：

通过创建 optionalValidator 解决了这个问题：

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

export function optionalValidator(validators?: (ValidatorFn | null | undefined)[]): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {

        return control.value ? Validators.compose(validators)(control) : null;
    };
}

以我的反应形式：

this.form = this._fb.group({
      email: [this.contact.email, [optionalValidator([Validators.maxLength(255), Validators.email])]]
    });

【讨论】：

在Validators.compose(validators)(control) : null 上显示错误类型undefined 的验证器不可分配给ValidatorFn | null | undefined 类型

【解决方案2】：

例如：

contactForm:FormGroup = new FormGroup({});

ngOnInit() {
const validateEmail = "[a-zA-Z0-9._\-]+[@]+[a-zA-Z0-9\-]+[.]+[a-zA-Z]{2,6}";
this.contactForm.addControl("email", new FormControl('', Validators.pattern(validateEmail));
}

这样您可以创建可选字段，但是当您有需要验证的数据时

编辑：添加 - 到允许的字符

【讨论】：

这个正则表达式远未完成，无法进行良好的验证。电子邮件：" "_@local 是一个有效的电子邮件地址，但未通过此测试。