Question

我的简单电子邮件验证工具遇到了问题。控制我的html的.ts页面有以下代码：

In [89]: s.tolist()
Out[89]: [12, 13, 12, 22, 34, 21]

我的HTML代码是：

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])
      });
  }
}

最后，我的email.ts包含我的验证器，如下所示：

  <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>

在我的主.ts文件中引用此验证程序时，我一直有错误。例如，当我将鼠标悬停在“EmailValidator.isValidMailFormat”上时出现此错误

import {Control} from '@angular/common';


export class EmailValidator {

   static isValidMailFormat(control: Control){
        var 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;
    }

}

我做错了什么？

Answer 1

更好的是，现在，Angular 4内置了电子邮件验证程序 https://github.com/angular/angular/blob/master/CHANGELOG.md#features-6 https://github.com/angular/angular/pull/13709

只需将电子邮件添加到代码中即可。例如，

  <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>

Answer 2

这是通过在我的validator.ts的第一行中将导入的类从Control更改为FormControl来解决的：

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;
    }

}

Answer 3

<input type="email" pattern="^[^\s@]+@[^\s@]+\.[^\s@]{2,}$">

pattern属性可用于自定义验证

Answer 4

只需使用func calendar(_ calendar: FSCalendar, didSelect date: Date, at monthPosition: FSCalendarMonthPosition) { self.callWebServiceWithDate(date: date) }

即可

.ts代码：

Validators.pattern('^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$')

HTML code：

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);    
    }
  }


}

Answer 5

角度9+和离子5 +

对于我的用例，默认的Angular Email验证程序还不够。所以我用了这个：

form.ts

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

regular-expression.constant.ts

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,}))$/;
}

Answer 6

   // SIMPLE SNIPPIT CODE
    
        this.myReactiveForm = new FormGroup({
              id: new FormControl(''),
              fullName: new FormControl('',Validators.compose([Validators.required,Validators.minLength(2),Validators.pattern('^[a-zA-Z][a-zA-Z0-9.,$;]+$')])),
              email: new FormControl("", Validators.compose([Validators.pattern(/^(([^<>()[\]\\.,;:\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,}))$/)])),
              mobile: new FormControl('',Validators.compose([Validators.required,Validators.pattern("^((\\+91-?)|0)?[0-9]{10}$")])),
              address: new FormControl(''),

Angular 2电子邮件验证器

6 个答案: