Angular2、電子メールの検証が適切に

Question

私は物事の下に検証する必要がありangular2での電子メールコンポーネントを持っています。私.ts-

@Input() emailSent: { customerEmail: string, confirmCustomerEmail: string, bindData: any }; 
@Output() onEmailQuote = new EventEmitter(); 


private errorMessages: { [key: string]: string } = { 
     contactEmailRequired: "This field is required.",    
     enterValidEmail: "Enter valid Customer email address.",   
    } 

validateEmail(email) { 
    var re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i; // regEx to check valid email 
    return re.test(email.customerEmail);   
    } 



private sendEmail() {  
     if (this.validateEmail(this.emailProposal) && this.hasMismatch() === false) { //allow the service call only when emails are valid    
      this.onEmailQuote.emit(this.emailSent); 
     } 

私の正規表現は、上記の誰かabove.Can言及した6点が私を助け満たしていないで

1)The email has a localpart on the left of an @, the domain on the right. Neither the localpart nor the domain may be empty 
2)Domain part can have any alphanumeric values 
3)Local part have any any alphanumerics and special characters Dot, underscore, hyphen. 
4)Domain part can have min 2 and max 4 characters affter the dot. 
5)No two consecutive dots are allowed in local part. 
6)Only special characters allowed are @,_,- and Dot 

私の鋳型で

<div class="controls"> 
      <md-input maxlength="60" placeholder="Customer Email" name="contactEmail" [(ngModel)]="emailProposal.customerEmail" #contactEmail="ngModel" id="contactEmail" (focus)="v_email=true;" (focusout)="v_email=false;"pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$" 
       required></md-input> 
      <div *ngIf="!v_email && contactEmail.errors && (contactEmail.dirty || contactEmail.touched || sendEmailClicked)"> 
       <span class="validation-error-inline" *ngIf="!v_email && contactEmail.errors.required">{{errorMessages.contactEmailRequired}}</span> 
       <span class="validation-error-inline" *ngIf="!v_email && contactEmail.errors.pattern && (emailProposal?.customerEmail?.indexOf('...')==-1)">{{errorMessages.enterValidEmail}}</span> 
      </div> 
     </div> 

上記の6つの検証ルールに合った正しいregExを使用します。ユーザーがfiをタブアウトしたときにのみエラーメッセージを表示しますまたは無効な電子メールで送信ボタンを押してみてください。有効な電子メールが入力されたときにのみ電子メールが送信される必要があります。

Answer 1

角度がある電子メールのバリデータは内蔵のhttps://github.com/angular/angular/pull/13709

https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6ただ、タグに電子メールを追加します。たとえば、

<form #f="ngForm"> 
    <input type="email" ngModel name="email" required email> 
    <button [disabled]="!f.valid">Submit</button> 
    <p>Form State: {{f.valid?'VALID':'INVALID'}}</p> 
    </form>