正则表达式模式验证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