Question

我是angular的新手。电子邮件验证不适用于我的反应式表单验证。我在某个地方有错误，但是我不确定这是什么。

脚本：

  this.loginForm = this.formBulder.group({

  fname:['', Validators.required],
  lname:['', Validators.required],
  email:['',  Validators.required],
  password:['', Validators.required,Validators.maxLength(5)],
  retypepassword:['', Validators.required,Validators.maxLength(5)]

  });

https://stackblitz.com/edit/angular-forms-validation-tfzhug?file=app/app.component.html

Answer 1

您可以尝试以下方法：

varchar

Answer 2

尝试这种方式

const emailPattern = '[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,63}';
mail = new FormControl('',Validators.compose( [Validators.required,Validators.pattern(emailPattern)]));

Answer 3

ts代码

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators} from '@angular/forms';
import { UserService } from '../../shared/services/user.service';
const EMAIL_REGEX = /^(([^<>()\[\]\\.,;:\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,}))$/;
@Component({
  selector: 'forget-password',
  templateUrl: './forget-password.component.html',
  styleUrls: ['./forget-password.component.css']
})
export class ForgetPasswordComponent implements OnInit {
  form: FormGroup = new FormGroup({});
  errors:any;
  failed:boolean=false;
  success:boolean=false;
  constructor(private userService: UserService,private fb: FormBuilder) {
    this.form = this.fb.group({
      email: ['', [Validators.required, Validators.email, Validators.pattern(EMAIL_REGEX)]]
    });
   }

  ngOnInit() {
  }

  get f() {

    return this.form.controls;
  }
  isFieldValid(field: string) {
    return (
    (this.form.get(field).touched ||
      this.form.get(field).untouched) && this.form.get(field).valid 
    );
  }
  forgetPassword() {
    this.failed=false;
    this.success=false;
    this.userService.forgetPassword(this.form.value).subscribe(result=>{
      this.success=true;
      this.form.reset();
    },errors=>{
      this.failed=true;
      this.errors=errors;
    })
  }
}

查看

<form [formGroup]="form" (ngSubmit)="forgetPassword()">
  <div class="md-form form-sm mb-2">
    <i class="fa fa-envelope prefix"></i>
    <input type="text" class="form-control" formControlName="email" type="email"
      placeholder="Enter Your Email Address">
      
    <div *ngIf="f.email.touched && f.email.invalid" class="text-danger">
      <div *ngIf="f.email.errors.required">Email is required.</div>
      <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
    </div>
  </div>
  <div class="text-center mt-2">
    <button class="btn btn-primary" type="submit" [disabled]="!form.valid">Send Password Reset Email
      <i class="fa fa-sign-in ml-1"></i>
    </button>
  </div>
  <div *ngIf="failed" class="text-danger" role="alert">
    <strong>Oops! </strong> <span *ngFor="let error of errors">{{error}}</span>
  </div>
  <div *ngIf="success" class="alert alert-success" role="alert">
    Successfully change your password
  </div>
</form>

Angular 7中的反应形式电子邮件验证

3 个答案: