角2材料設計，電子郵件驗證

嗨，我嘗試使用材料的設計，角2 這裏實現形式驗證輸入字段：角2材料設計，電子郵件驗證

<md-input-container class="example-full-width" 
      dividerColor="{{username.untouched || username.valid?'primary':'warn'}}"> 
      <input mdInput placeholder="Email" type="email" name="username" id="username" 
      #username="ngModel" required 
      [(ngModel)]="loginModel.username"> 
     </md-input-container>

我上面的代碼中，我試圖把紅顏色底部邊框如果：

場被觸摸和required申請條件不符合
現場被感動了第二有無效的電子郵件串

第一個條件正在使用username.untouched || username.valid?'primary':'warn'完成，但無法驗證電子郵件。任何建議。

編輯：我試着使用<md-hint>爲：

<md-hint *ngIf="username.errors &&(username.dirty || username.touched)"> 
       <span [hidden]="username.errors?.required || !username.errors?.email">Invalid email</span> 
       <span [hidden]="!username.errors?.required">Required.</span> 
      </md-hint>

它工作正常所需，但不是不正確的電子郵件。

來源

2017-03-08 Vivek

電子郵件驗證器，並將它需要'email'屬性。又見例如https://plnkr.co/edit/dFoPGKTQ9xPsQK19DjYg?p=preview – yurzui

@yurzui它顯示屬性「電子郵件」不會對類型「的typeof確認者的存在。任何建議？ – Vivek

正如你可以在我的plunker看到我創建它手動 – yurzui

使用<md-error>，你不必擔心錯誤的驗證方式。

HTML：

<md-input-container> 
    <input mdInput placeholder="email" [formControl]="emailFormControl" required> 
    <md-error *ngIf="emailFormControl.hasError('required')"> 
    This field is required 
    </md-error> 
    <md-error *ngIf="emailFormControl.hasError('pattern')"> 
    Please enter a valid email address 
    </md-error> 
</md-input-container>

TS：

import { FormControl, Validators, NgModel } from '@angular/forms'; 

const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-][email protected][a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; 
export class FormlayoutComponent { 
    private emailFormControl = new FormControl('', [Validators.required, Validators.pattern(EMAIL_REGEX)]); 
.... 
}

希望這有助於。僅因爲角V4.0.0-beta.6

來源

2017-05-24 18:06:33 SatAj

所以在MD沒有現成的電子郵件驗證這將是非常有益的理解？ – Davor

@Davor，在Github的組件文件中： const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&'*+/ = ?^_'{|}--]+ @ [A-ZA-Z0-9 - ] +（？：\。[A-ZA-Z0-9 - ] +）* $ /; （''，[ Validators.required， Validators.pattern（EMAIL_REGEX）]）; } https://github.com/angular/material2/blob/a2a25bead0da81e17a2853fa60426e0deed10f62/src/material-examples/input-errors/input-errors-example.ts – LargeDachshund

角2材料設計，電子郵件驗證

回答

相關問題