在 Angular 2 表单中使用 javascript 正则表达式作为验证模式的问题

Question

我正在尝试使用 javascript 正则表达式作为 Angular 2 template/form.

中的模式验证器

这是我定义为常量的 JS 正则表达式：

export class AppConstants {
    static EMAIL_PATTERN = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,10}$/;
    static FIRST_NAME_PATTERN = /^[a-zA-ZÀ-ÿ\s'-]+$/;
}

我从组件中的常量导入正则表达式：

EMAIL_PATTERN = AppConstants.EMAIL_PATTERN;

然后在我的 html:

pattern="EMAIL_PATTERN"

但是，即使电子邮件地址有效，验证器也会触发并将电子邮件字段标记为无效。

这是完整的模板：

    <div class="input-group">
        <span class="input-group-addon">
            <span class="glyphicon icon-email" aria-hidden="true"></span>
        </span>
        <input type="email"
               ngControl="email"
               #email="ngForm"
               required
               pattern="EMAIL_PATTERN"
               [ngModel]="emailInfo.email"
               (ngModelChange)="emailInfo ? emailInfo.email = $event : null"
               placeholder="{{'EMAIL_FORM.NEW_ADDRESS'| translate }}"
               class="form-control"
               validateEmailAvailable/>
        <span *ngIf="isSuccessFeedback(emailForm, email)" class="form-control-feedback" aria-hidden="true">
            <span class="glyphicon icon-accept" aria-hidden="true"></span>
        </span>
        <span *ngIf="isErrorFeedback(emailForm, email)" class="form-control-feedback" aria-hidden="true">
            <span class="glyphicon icon-close" aria-hidden="true"></span>
        </span>
    </div>

    <div [hidden]="email.valid">
        <div *ngIf="email?.errors?.required" class="control-label">{{'EMAIL_FORM.EMAIL_REQUIRED'| translate}}</div>
        <div *ngIf="email?.errors?.pattern" class="control-label">{{'EMAIL_FORM.EMAIL_PATTERN'| translate}}</div>
        <div *ngIf="email?.errors?.unavailable" class="control-label">{{'EMAIL_FORM.ALREADY_IN_USE'| translate}}</div>
    </div>
</div>

Answer 1

Angular2 中的模式验证器目前基于模式属性，因此只接受字符串，它遵循 HTML5 模式属性的语义：

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-pattern

您的 HTML 示例仅在输入中接受字符串 "EMAIL_PATTERN"。

如果你想使用你的变量，我建议使用 FormBuilder 来定义你的控件。否则，您需要将实际的正则表达式字符串直接放入模式属性中。

Answer 2

你需要

[pattern]="EMAIL_PATTERN"

分配值 EMAIL_PATTERN 而不是字符串 EMAIL_PATTERN.

~~目前您不能对 pattern 或 min、max 等其他验证规则使用绑定，因为它们需要是静态的。有一个悬而未决的问题来支持这一点。~~

这已在 Angular2 final 中修复（来自评论）

在 Angular 2 表单中使用 javascript 正则表达式作为验证模式的问题

Issue with using a javascript regular expression as validation pattern in an Angular 2 form

angular2-forms

angular