电子邮件验证未在角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表单验证

回答

相关问题