validation - 如何逃避 Angular2 字段验证模式

Question

如何将模式正则表达式放置在 angular2 形式中 我有这个图案

@Component({
    selector: 'my-form',
    template: `
        <h2>My Form</h2>
        <form (ngSubmit)="onSubmit(ff)" #ff="ngForm">
            <div>
                <label for="mail">Field</label>
                <input ngControl="Field" type="text" id="email" required #email="ngForm" pattern="[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$">
                <span class="error" *ngIf="!email.valid">Not valid</span>
            </div>
            <button type="submit" [disabled]="!ff.valid">Submit</button>
        </form>
    `
})

我的模式正则表达式出现错误。有没有办法以某种方式逃脱它？

这是我在该正则表达式上遇到的一些错误:

[tslint] expected an assignment or function call
[tslint] missing whitespace
[ts] Cannot invoke an expression whose type lacks a call signature.
[ts] Cannot find name 'a'.
[tslint] expected an assignment or function call
[tslint] missing whitespace
[ts] Cannot invoke an expression whose type lacks a call signature.
[ts] The left-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.
[ts] Cannot find name 'a'.
[tslint] missing whitespace
[ts] Expression expected.

Answer 1

在 ` 之前添加 \(反引号)

pattern="[a-z0-9!#$%&'*+\/=?^_\`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$"

或者将模板移动到 HTML 文件并使用 templateUrl 而不是 template