Question

我创建了一个注册表单。因为电子邮件验证不起作用!!

这是代码： -

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_.+-]+@[a-zA-Z0–9-]+.[a-zA-Z0–9-.]+$)"])
 }

当我输入表格中的某些数据时，它们会生效！不验证电子邮件！

Answer 1

您好，我正在使用我在我的应用程序中使用的登录表单进行电子邮件模式和电子邮件验证

在您的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/

开发自己的模式

Answer 2

从Angular 4开始，您可以将email directive添加到输入控件中以验证电子邮件地址。

然后，您可以使用电子邮件密钥显示错误。

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

Answer 3

首先，您对Validators.pattern的使用非常不正确，应该是：

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

第二个是提供的正则表达式在使用时甚至不会解析为有效的正则表达式，因此我们使用go do some research然后使用：/^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i

仍然不完美，因此我们会详细了解正则表达式和电子邮件以及then be horrified。

这里是Plunker demo。

Answer 4

<。>在.ts文件中

valForm: FormGroup;

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

in .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以及Validators。

电子邮件验证无法在角度2表格验证中使用

4 个答案: