Angular6 angular 7中的反应式表单电子邮件验证

我是新来的。电子邮件验证在我的反应式表单验证中不起作用。我在某个地方出错了，但我不确定是什么

脚本：

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

  });

您可以尝试以下方法：

 this.loginForm = this.formBulder.group({

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

           });

试着这样做

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

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

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{FormGroup，FormBuilder，Validators}；
从“../../shared/services/user.service”导入{UserService}；
const-EMAIL\u REGEX=/^（[^（）\[\]\\，；：\s@“]+（\.[^（）\[\]\，；：\s@”]+*）（“+”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.+]；
@组成部分({
选择器：“忘记密码”，
templateUrl:'./忘记密码.component.html'，
样式URL:['./忘记密码.component.css']
})
导出类ForgetPasswordComponent实现OnInit{
form:FormGroup=newformgroup（{}）；
错误：任何；
失败：布尔值=false；
成功：布尔值=false；
构造函数（私有userService:userService，私有fb:FormBuilder）{
this.form=this.fb.group({
电子邮件：[''[Validators.required，Validators.email，Validators.pattern（email_REGEX）]]
});
}
恩戈尼尼特（）{
}
得到f（）{
返回此.form.controls；
}
isFieldValid（字段：字符串）{
返回(
（这个。表单。get（field）。touch||
this.form.get（field.untouched）&&this.form.get（field.valid）
);
}
伪造密码（）{
this.failed=false；
成功=错误；
this.userService.forgetPassword（this.form.value）.subscribe（结果=>{
这就是成功；
this.form.reset（）；
}，错误=>{
this.failed=true；
这个。错误=错误；
})
}
}

看法

电子邮件是必需的。
电子邮件必须是有效的电子邮件地址
发送密码重置电子邮件
哎呀{{error}
成功更改您的密码

在电子邮件中，您在验证器周围有括号。必填项。您尝试过删除这些吗？您可以编辑我的stackblitz吗？但是如果我输入了错误的电子邮件，则错误消息不显示它不会自动显示消息您可以使用登录表单对象访问错误消息，然后在您的HTMLC上显示此错误消息您可以编辑我的stackblitz吗：

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