在反应式表单上使用正则表达式进行Angular 7电子邮件验证

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-email-validation',
  templateUrl: './email-validation.component.html',
  styleUrls: ['./email-validation.component.css']
})
export class EmailValidationComponent {
  emailForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.emailForm = this.fb.group({
      email: ['', [Validators.required, Validators.email, this.customEmailValidator]]
    });
  }

  customEmailValidator(control) {
    const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    return regex.test(control.value) ? null : { invalidEmail: true };
  }

  onSubmit() {
    if (this.emailForm.valid) {
      console.log('Form submitted:', this.emailForm.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

<form [formGroup]="emailForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" formControlName="email">
    <div *ngIf="emailForm.get('email').errors?.required">Email is required</div>
    <div *ngIf="emailForm.get('email').errors?.email">Invalid email format</div>
    <div *ngIf="emailForm.get('email').errors?.invalidEmail">Custom email validation failed</div>
  </div>
  <button type="submit" [disabled]="!emailForm.valid">Submit</button>
</form>

this.emailForm.get('email').updateValueAndValidity();