Question

我正在尝试使用javascript正则表达式作为Angular 2模板/表单中的模式验证器。

以下是我定义为常量的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示例只接受一个＆＃34; EMAIL_PATTERN＆＃34;在输入中。

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

Answer 2

你需要

[pattern]="EMAIL_PATTERN"

指定EMAIL_PATTERN的值而不是字符串EMAIL_PATTERN。

~~目前，您无法使用pattern或min，max等其他验证规则的绑定，因为它们必须是静态的。有一个未解决的问题需要支持。~~

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

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

2 个答案: