電子郵件驗證未在角2表單驗證

工作我已經創建了一個註冊形式。在這個電子郵件驗證不起作用！電子郵件驗證未在角2表單驗證

這裏是代碼： -

HTML頁面

<form [formGroup]="myForm" (ngSubmit)="submit()" > 
<ion-item> 
    <ion-label primary floating>EMAIL</ion-label> 
    <ion-input type="email" id="email" class="form-control" formControlName="email" ></ion-input> 
</ion-item> 
    <p *ngIf="myForm.controls.email.errors && myForm.controls.email.dirty " class="alert alert-danger"> 
     <small class="up"> <i>Enter Valid Email Address!</i></small></p>

TS文件： -

this.myForm = formBuilder.group({ 
     'email' : new FormControl('', [Validators.required, Validators.pattern(required pattern=("^[a-zA-Z0–9_.+-][email protected][a-zA-Z0–9-]+.[a-zA-Z0–9-.]+$)"]) 
}

，當我在表單中輸入一些數據，他們得到有效的！不驗證電子郵件！

來源

2016-12-15 SelvaKumar Duraisamy

的第一件事情是，你的Validators.pattern的使用是非常不正確的，應該是：

'email' : new FormControl('', [Validators.required, Validators.pattern(/^[a-zA-Z0–9_.+-][email protected][a-zA-Z0–9-]+.[a-zA-Z0–9-.]+$/i])

二是所提供的正則表達式甚至不解析爲一個有效的正則表達式時，它的使用，所以不是我們將go do some research，然後用：/^(([^<>()\[\]\.,;:\[email protected]\"]+(\.[^<>()\[\]\.,;:\[email protected]\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\[email protected]\"]+\.)+[^<>()[\]\.,;:\[email protected]\"]{2,})$/i

這仍然不完善，所以我們將閱讀更多關於正則表達式和電子郵件和then be horrified。

這裏有一個Plunker demo。

來源

2016-12-15 16:42:25 silentsod

你好這裏是工作郵件模式和電子郵件驗證與登錄表單我在我的應用程序已經使用

在HTML

<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm.value)"> 
<div class="form-group" [ngClass]="{'has-error':!signinForm.controls['usermail'].valid && signinForm.controls['usermail'].touched}"> 
    <label>Email Address</label> 
    <input class="form-control" type="email" [formControl]="signinForm.controls['usermail']"> 
    <span *ngIf="signinForm.controls['usermail'].hasError('required') && signinForm.controls['usermail'].touched && !signinForm.submitted" class="required pull-right">*Please Enter Email</span> 
    <span *ngIf="signinForm.controls['usermail'].hasError('pattern') && signinForm.controls['usermail'].touched" class="required pull-right">*Invalid Email</span> 
</div> 
<div class="form-group" [ngClass]="{'has-error':!signinForm.controls['userpass'].valid && signinForm.controls['userpass'].touched}"> 
    <label>Password</label> 
    <input class="form-control" type="password" [formControl]="signinForm.controls['userpass']" (focus)="showErrorMessage=false"> 
    <span *ngIf="signinForm.controls['userpass'].hasError('required') && signinForm.controls['userpass'].touched && !signinForm.submitted" class="required pull-right">*Please Enter Password</span> 
</div> 
<button type="submit" class="btn btn-pri mds_btn" [disabled]="!signinForm.valid">Login</button>  
</form>

在組件

import { Component } from '@angular/core'; 
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: [ './login.component.scss' ] 
}) 
export class LoginComponent { 
    myForm: FormGroup; 

    emailRegex: any = '^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$'; 
    passRegex:any ='^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}$'; 

    constructor(fb: FormBuilder) { 

    this.myForm = fb.group({ 
     'logmail': [ null, Validators.compose([ Validators.required, Validators.pattern(this.emailRegex) ]) ], 
    'logpass': [ null, Validators.compose([ Validators.required, Validators.pattern(this.passRegex) ]) ] 
    }); 

    this.myForm.valueChanges.subscribe((form: any) => { 
    }); 
} 

submitForm(lgvalue: any) { 
    //do logic here after submitting the form 

    } 
}

在這個例子中，我已經使用emailRegex這是有效的電子郵件模式如果你想你可以在這裏開發自己的模式http://www.html5pattern.com/

來源

2016-12-15 19:06:27 Malhari

其工作謝謝！ –

@SelvaKumarDuraisamy如果這個答案幫助你請upvote或給綠色印記。 :) – Malhari

對不起，我有不到15名的聲譽 –

由於角4，您可以將email directive添加到您的輸入控件來驗證的電子郵件地址。

然後，隨意使用電子郵件鍵顯示錯誤。

<div *ngIf="email.errors && (email.dirty || email.touched)"> 
    <div [hidden]="!email.errors.email"> 
    The email address is incorrect. 
    </div> 
</div>

來源

2017-04-13 17:22:16

中的.ts文件

valForm: FormGroup; 

constructor(fb: FormBuilder) { this.valForm = fb.group({ 
'email': [null, Validators.compose([Validators.required 
,Validators.pattern(email_pattern)])] 
}); }

以html

<span class="text-danger" *ngIf="valForm.controls['email'].hasError('required') && (valForm.controls['email'].dirty || valForm.controls['email'].touched)">This field is required</span> 
<span class="text-danger" *ngIf="valForm.controls['user_role'].hasError('required') && (valForm.controls['user_role'].dirty || valForm.controls['user_role'].touched)">This field is required</span>

確保你有進口FormBuilder，FormGroup以及驗證程序。

來源

2017-10-05 10:15:39 jahmed31

電子郵件驗證未在角2表單驗證

回答

相關問題