角度2の形式のRegExアプリケーション

Question

入力ボックスに間違ったパターンが入力されても動作していない場合にエラーを生成しようとしています。私は何をしようとしていることは以下の通りです：

<div class="col-md-6 col-md-offset-3"> 
<h2>Login</h2> 
<form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate> 
    <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !Username.valid }"> 
     <label for="Username">Username</label> 
     <input type="text" class="form-control" name="Username" [(ngModel)]="model.Username" #Username="ngModel" required /> 
     <div *ngIf="f.submitted && !Username.valid" class="help-block">Username is required</div> 
    </div> 

    <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !Email.valid }"> 
     <label for="Email">Email</label> 
     <input type="email" class="form-control" name="Email" [(ngModel)]="model.Email" 
       #Email="ngModel" required pattern="[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$"/> 
     <div *ngIf="f.submitted && !Email.valid" class="help-block">Email is required</div> 
     <div *ngIf="!pattern" class="alert alert-danger">Wrong Pattern</div> 
    </div> 
</form> 

エラー（間違ったパターン）についての情報を持つdivが同じページ上に存在スティックと何も私が正しいか間違っているメールアドレスを入力しているかどうか起こりません。私を助けてください！

Answer 1

反応的なフォームと独自のカスタムバリデータを使用できます。あなたのフォームにフィールドがemailしかないと仮定しましょう。

//html 
<form [formGroup]="yourFormName" (ngSubmit)="yourSubmitMethod()"> 
    <div [class.has-danger]="_yourFormControlNameForEmailField.touched && _yourFormControlNameForEmailField.invalid" [class.has-success]="_yourFormControlNameForEmailField.dirty && _yourFormControlNameForEmailField.valid"> 
      <label for="email">Email</label> 
      <input type="email" name="email" formControlName="yourFormControlNameForEmailField" [class.form-control-danger]="_yourFormControlNameForEmailField.touched && _yourFormControlNameForEmailField.invalid" [class.form-control-success]="_yourFormControlNameForEmailField.dirty && _yourFormControlNameForEmailField.valid"> 
    </div> 
</form> 

//in ts 
export class YourClassName { 
    yourFormName: FormGroup; 
    _yourFormControlNameForEmailField = new FormControl(model.Email, [<any>EmailValidator.emailPattern]); 
    constructor(private formBuilder: FormBuilder, ...){ 
      ... 
    } 

    ngOnInit(){ 
      //create a form group with form control(s) 
      this.yourFormName= this.formBuilder.group({ 
       yourFormControlNameForEmailField: this._yourFormControlNameForEmailField 
      }); 
    } 

    yourSubmitMethod(){ 
      ... 
    } 
} 

//EmailValidator 
import { AbstractControl } from '@angular/forms'; 

export class EmailValidator { 
    static emailPattern(c: AbstractControl): { [key: string]: any } { 
     let regexp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
     //if test is unsuccessful, return key(emailPattern)-value(false) pair 
     return regexp.test(c.value) ? null : { emailPattern: false }; 
    } 
}