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

Question

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

如果表单有许多可选字段，如网站、电话等，那会怎样？

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

Answer 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])]]
    });

Answer 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));
}

通过这种方式，您可以创建可选字段，但是当您有需要验证的数据时

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