Angular 2 Form Validierungsmuster Regex Fehler

Question

Ich erstelle ein Formular in eckigen, die das Namensfeld erfordert nur alphanumerische Zeichen und Leerzeichen enthalten. Um dies zu tun ich das Muster Attribut verwenden:

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

und ich habe die folgende Fehlermeldung möchte ich zeigen, wenn die Zeichenfolge nicht übereinstimmt:

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

Allerdings scheint es, dass, selbst wenn die Zeichenfolge Sollte der reguläre Ausdruck übereinstimmen, kann ich immer noch die Fehlermeldung sehen. Irgendwelche Ideen?

Answer 1

können Sie verwenden

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

Die [A-Za-z\d_] die gleichen Zeichen Spiele als \w in JavaScript nativen Regex. Das ganze Muster entspricht somit einem oder mehreren ASCII-Buchstaben, Ziffern, Unterstrichen, Bindestrichen oder Leerstellen.

Beachten Sie, dass angular das Muster standardmäßig verankert, es ist jedoch vorzuziehen, die Anker ^ und $ explizit im Muster zu halten, um es mit anderen Frameworks kompatibel zu machen.

Answer 2

Ich denke, das Problem hier ist, dass die Syntax von regex nicht korrekt gebildet:

<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> 

Blick auf diese plunkr