正則表達式模式驗證Angularjs2

Question

我正在開發一個Angular2應用程序。我試圖在使用正則表達式模式登錄時進行驗證。

login.component.ts

import { Component, OnInit } from '@angular/core'; 
import {AuthenticationService, User} from '../authentication-service.service'; 
import {TokenService} from '../token.service'; 

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'], 
    providers: [AuthenticationService,TokenService] 

}) 

export class LoginComponent { 

public user = new User('','',''); 
public errorMsg = ''; 

constructor(private _service:AuthenticationService) { 
    var ssnRegex='^(\d{6}|\d{8})[-|(\s)]{0,1}\d{4}$'; 
    this.logout(); 
} 

    login() { 
     if(!this._service.login(this.user)){ 
      this.errorMsg = 'Failed to login'; 
     } 
    } 

    logout(){ 
     localStorage.removeItem("token"); 
     localStorage.removeItem("user"); 
     localStorage.removeItem("paydid"); 
    } 
} 

login.component.html

<form id="login-form" action="" method="post" role="form" style="display: block;" #roomForm='ngForm'> 
     <div class="form-group"> 
         <input type="text" required maxlength="12" minlength="12" [pattern]="ssnRegex" ngModel name="capacity" #capacity='ngModel' [(ngModel)]="user.ssn" name="ssn" id="ssn" tabindex="1" class="form-control input-box" placeholder=" Personnummer (ååååmmddnnnn)" 
          value=""> 
        </div> 
        <div class="form-group"> 
         <div class="row"> 
          <div class="col-sm-4 col-sm-offset-4"> 
           <span style="color:red; float:left; width: 100px;">{{errorMsg}}</span> 
           <button (click)="login()" class="btn waves-effect waves-light" type="submit" name="action">Login</button> 
          </div> 
         </div> 
        </div>l 
       </form> 

這是我現在已經做了到。但是這不是在登錄時進行預期的驗證。同時，如果輸入的字符串不符合模式，我需要顯示錯誤消息。我是Angualrjs的新手。幫助讚賞。謝謝！

Answer 1

您需要更改爲：

this.ssnRegex='^(\d{6}|\d{8})[-|(\s)]{0,1}\d{4}$'; 

例子：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form #roomForm="ngForm"> 
     <input type="text" [pattern]="ssnRegex" [(ngModel)]="user.ssn" name="ssn" required #ssn="ngModel"> 
     {{ssn.valid}} 
    </form> 
    `, 
}) 
export class App { 
    constructor() { 
    this.user = {ssn: ""}; 
    this.ssnRegex = "[A-Za-z]{3}" // Only 3 letters allowed for example 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule, FormsModule], 
    declarations: [ App ], 
    providers: [SessionService], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Plunker