Angular 2电子邮件验证程序_Angular_Typescript

Angular 2电子邮件验证程序

angular typescript

Angular 2电子邮件验证程序,angular,typescript,Angular,Typescript,我的简单电子邮件验证程序有问题。控制我的html的My.ts页面包含以下代码： import {EmailValidator} from '../../validators/email'; @Component({ templateUrl: 'build/pages/auth-signup/auth-signup.html', }) export class AuthSignupPage { constructor(private formBuilder: FormBuilder)

我的简单电子邮件验证程序有问题。控制我的html的My.ts页面包含以下代码：

import {EmailValidator} from  '../../validators/email';
@Component({
  templateUrl: 'build/pages/auth-signup/auth-signup.html',
})

export class AuthSignupPage {
  constructor(private formBuilder: FormBuilder) {
     this.slideOneForm = new FormGroup({
          firstName: new FormControl('', [
              Validators.maxLength(30), 
              Validators.pattern('[a-zA-Z ]*'),
              Validators.required
              ]),
          lastName: new FormControl('', [
              Validators.maxLength(30), 
              Validators.pattern('[a-zA-Z ]*'), 
              Validators.required]),
          email: new FormControl('', [
              Validators.maxLength(30), 
              EmailValidator.isValidMailFormat, 
              Validators.required]),
          password: new FormControl('', [
              Validators.maxLength(30), 
              Validators.required]),
          confirmPassword: new FormControl('', [
              Validators.maxLength(30), 
              Validators.required])
      });
  }
}

我的HTML代码是：

  <ion-item>
    <ion-label floating>Email (this will be your login/username)</ion-label>
    <ion-input #email (change)="elementChanged(email)" formControlName="email" type="email" [class.invalid]="!slideOneForm.controls.email.valid && (emailChanged || submitAttempt)"></ion-input>
  </ion-item>

我做错了什么？

通过在我的验证器的第一行中将导入的类从

Control

更改为

FormControl

解决了这个问题。ts：

import {FormControl} from '@angular/forms';


export class EmailValidator {

   static isValidMailFormat(control: FormControl){
        let EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;

        if (control.value != "" && (control.value.length <= 5 || !EMAIL_REGEXP.test(control.value))) {
            return { "Please provide a valid email": true };
        }

        return null;
    }

}

从'@angular/forms'导入{FormControl}；
导出类电子邮件验证程序{
静态isValidMailFormat（控件：FormControl）{
让我们发电子邮件给[a-z0-9]（[a-z0-9-]*[a-z0-9]）（[a-z0-9-]*[a-z0-9]）？（\[a-z0-9]（[a-z0-9-]*[a-z0-9]）*$/i；
如果（control.value！=“”&（control.value.length更好，现在Angular 4内置了电子邮件验证程序

只需将电子邮件添加到标签中即可。例如
  <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>


提交
表单状态：{f.valid？'valid'：'INVALID'}
只需使用验证程序.pattern（'^[^\\s@]+@[^\\s@]+\\.^\\s@]{2，}$'）即可。

.ts代码：
import { Component } from '@angular/core';
import { NavController} from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { UserDetails } from '../../app/Model/UserDetails';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'page-login',
  templateUrl: 'login.html'  
})
export class LoginPage {
logForm: FormGroup;
  email: string;
  constructor(public navCtrl: NavController,public formBuilder: FormBuilder) {
    this.logForm = formBuilder.group({
      email: ['', Validators.compose([Validators.required, Validators.pattern('^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$'), Validators.minLength(1)])],
      password: ['', Validators.compose([Validators.required, Validators.minLength(8)])],

    });
  }


  onSubmit(value: any): void {
    if (this.logForm.valid) {
      //window.localStorage.setItem('username', value.username);
      //window.localStorage.setItem('password', value.password);    
    }
  }


}

    <form [formGroup]="logForm" (ngSubmit)="onSubmit(logForm.value)">
      <div class="login-user-input">

        <ion-item>
          <ion-label class="label"  fixed>Email</ion-label>
          <ion-input type="text" formControlName="email" [(ngModel)]="user.Email" ></ion-input>
        </ion-item>
        <ion-item *ngIf="logForm.controls.email.hasError('pattern') && logForm.controls.email.touched">
          <p>Please enter valid Email</p>
        </ion-item>
        <ion-item>
          <ion-label class="label"  fixed>Password</ion-label>
          <ion-input type="password" formControlName="password" maxlength="8" [(ngModel)]="user.password"></ion-input>
        </ion-item>
        <ion-item *ngIf="logForm.controls.password.hasError('minLength') && logForm.controls.password.touched">
          <p>Please enter valid Password</p>
        </ion-item>
      </div>
      <div>
        <button text-center class="customersubmitbtn" [disabled]="!logForm.valid" color="primary" >Login</button>
      </div>
    </form>

HTML代码：
import { Component } from '@angular/core';
import { NavController} from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { UserDetails } from '../../app/Model/UserDetails';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'page-login',
  templateUrl: 'login.html'  
})
export class LoginPage {
logForm: FormGroup;
  email: string;
  constructor(public navCtrl: NavController,public formBuilder: FormBuilder) {
    this.logForm = formBuilder.group({
      email: ['', Validators.compose([Validators.required, Validators.pattern('^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$'), Validators.minLength(1)])],
      password: ['', Validators.compose([Validators.required, Validators.minLength(8)])],

    });
  }


  onSubmit(value: any): void {
    if (this.logForm.valid) {
      //window.localStorage.setItem('username', value.username);
      //window.localStorage.setItem('password', value.password);    
    }
  }


}

    <form [formGroup]="logForm" (ngSubmit)="onSubmit(logForm.value)">
      <div class="login-user-input">

        <ion-item>
          <ion-label class="label"  fixed>Email</ion-label>
          <ion-input type="text" formControlName="email" [(ngModel)]="user.Email" ></ion-input>
        </ion-item>
        <ion-item *ngIf="logForm.controls.email.hasError('pattern') && logForm.controls.email.touched">
          <p>Please enter valid Email</p>
        </ion-item>
        <ion-item>
          <ion-label class="label"  fixed>Password</ion-label>
          <ion-input type="password" formControlName="password" maxlength="8" [(ngModel)]="user.password"></ion-input>
        </ion-item>
        <ion-item *ngIf="logForm.controls.password.hasError('minLength') && logForm.controls.password.touched">
          <p>Please enter valid Password</p>
        </ion-item>
      </div>
      <div>
        <button text-center class="customersubmitbtn" [disabled]="!logForm.valid" color="primary" >Login</button>
      </div>
    </form>


电子邮件
请输入有效电子邮件
密码
请输入有效密码
登录


模式属性可用于自定义验证
角度9+和离子5+
默认的Angular电子邮件验证器对于我的用例来说是不够的。因此我使用了以下方法：
表格
正则表达式.constant.ts
导出类RegularExpressionConstant{
静态电子邮件：RegExp=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@“]+）*）（“+”）@（（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}]）；（[a-zA Z-Z-0-9]+}.[a-zA 2]）/；
}
但仍然需要多一点验证，因为我可以编写test@testwithou“.com”，它不是有效的emailuser@host是有效的电子邮件。主机部件不需要TLD才能有效。当然，您的邮件路由器将仅尝试在本地域上路由。不幸的是，此电子邮件验证程序验证john。doe@gmail真实e即使它缺少.com部分。非常简单。模式属性允许您编写自己的正则表达式模式进行验证fxI建议将control.value！=“code>更改为control.value
，因为在某些情况下它可能会产生未捕获的异常。这对我来说很有用。代码如下：电子邮件：[''，Validators.compose（[Validators.required，Validators.email]）]
<input type="email" pattern="^[^\s@]+@[^\s@]+\.[^\s@]{2,}$">

     this.form = this.formBuilder.group({
         
          email: ['', Validators.compose([Validators.required, 
                      Validators.pattern(RegularExpressionConstant.EMAIL)])],
          });

export class RegularExpressionConstant {
    static EMAIL: RegExp = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
}