Angular 2表單驗證模式正則表達式錯誤

Question

我正在創建一個角度表單，要求名稱字段只包含字母數字字符和空格。要做到這一點，我使用模式屬性：

<input type="text" class="form-control" placeholder="Name" name="Name" [(ngModel)]="name" required pattern="/^[a-z\d-_\s]+$/i" #nameField="ngModel"> 

，我有以下錯誤消息我想表明，當字符串不匹配：

<div *ngIf="nameField.errors"> 
    <div [hidden]="!nameField.errors.pattern"> 
     <p class="has-error"> 
      Only spaces, letters, and numbers are allowed. 
     </p> 
    </div> 
</div> 

然而，似乎即使串應該匹配正則表達式，我仍然可以看到錯誤消息。有任何想法嗎？

Answer 1

您可以使用

pattern="^[\w\s-]+$" 

的[A-Za-z\d_]相同字符相匹配在JavaScript原生正則表達式中爲\w。整個模式因此匹配一個或多個ASCII字母，數字，下劃線，連字符或空格。

注意角度錨默認的模式，但最好是保持錨^和$明確的模式，使其與任何其他框架兼容。

Answer 2

我想這裏的問題是，正則表達式的語法不正確形成：

<form novalidate #f="ngForm" novalidate> 
    <input type="text" 
    class="form-control" 
    placeholder="Name" name="Name" 
    [(ngModel)]="name" 
    required pattern="^[A-Z\\a-z\\d-_\\s]+$" 
    #nameField="ngModel" > 
    <div> 
     <div *ngIf="nameField.errors?.pattern"> 
     <p class="has-error"> 
      Only spaces, letters, and numbers are allowed. 
     </p> 
     hame: {{nameField.errors | json}} 
    </div> 
    </div> 
    </form> 

看看這個plunkr