Angular regex email domain accept and not accept validation

Question

Indiviual Email Id accept only the gmail and yahoo domain Business Email Id not accept the gmail and yahoo domain

Indiviual Email Id regex validation is working and Business Email Id regex validation not working.

How to fix Business Email Id regex validation?

please check the stackblitz example

HTML

<form [formGroup]="registerProfileForm" novalidate>
  <span><b>Indiviual Email Id accept only the gmail and yahoo domain</b></span>
  <div>
    <label for="vendorEmailId">Indiviual Email Id<span class="required-field">*</span></label>
    <input class="form-control" maxlength="100" formControlName="indiviualEmailId"  type="email">
  </div>
  <span class="text-danger"
                  *ngIf="registerProfileForm.controls?.indiviualEmailId?.hasError('pattern')">
                  Please enter a valid email domain name 
                  </span>
  <br />
  <br />
  <br />
  <br />
  <br />
  <span><b>Business Email Id not accept  the gmail and yahoo domain</b></span>

  <div>
    <label for="vendorEmailId">Business Email Id<span class="required-field">*</span></label>
    <input class="form-control" maxlength="100" formControlName="businessEmailId"  type="email">
  </div>
  <span class="text-danger"
                    *ngIf="registerProfileForm.controls?.businessEmailId?.hasError('pattern')">
                    Please enter a valid email domain name 
                    </span>
</form>

ts

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


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  registerProfileForm: FormGroup;
  emailValidatorBusiness = /^[-!#$%&'*+\/0-9=?A-Z^_a-z{|}~](\.?[-!#$%&'*+\/0-9=?A-Z^_a-z`{|}~])*@(?:(?:[a-zA-Z0-9-]+\.)?[a-zA-Z]+\.)?(!gmail|!yahoo)\.[a-zA-Z](-?[a-zA-Z0-9])+$/;

  emailValidatorIndiviual = /^[-!#$%&'*+\/0-9=?A-Z^_a-z{|}~](\.?[-!#$%&'*+\/0-9=?A-Z^_a-z`{|}~])*@(?:(?:[a-zA-Z0-9-]+\.)?[a-zA-Z]+\.)?(gmail|yahoo)\.[a-zA-Z](-?[a-zA-Z0-9])+$/;
  constructor(
    private formBuilder: FormBuilder){
      this.registerProfileForm = this.formBuilder.group({
        indiviualEmailId: new FormControl('',[Validators.required,Validators.pattern(this.emailValidatorIndiviual)]),
        businessEmailId: new FormControl('',[Validators.required,Validators.pattern(this.emailValidatorBusiness)])
      })
    }
}

Demo: https://stackblitz.com/edit/angular-ivy-3sbonz?file=src/app/app.component.ts

Answer 1

Alternative: Use Angular validators

e.g. Validators.email() as explained in: Angular 5 - form validation e-mail

There you can find an answer combining validators like:

this.validations_form = this.formBuilder.group({
    email: new FormControl('', Validators.compose([
           Validators.required,
           Validators.email
    ]))
});

In a second step you can test the primarily valid email for the host. E.g. with a regex and different assertions per case:

• assert business email does not match gmail|yahoo
• assert private email does match gmail|yahoo

See:

• Regular expression not matching specific string
• Regular expression to match a line that doesn't contain a word

Fixing the regex in isolation

Email-validation using regex is hard: How can I validate an email address using a regular expression?

Still, if the regex is not working, let's compare them:

Not Working

emailValidatorBusines, expected acceptance criteria::

1. not match any gmail domain
2. not match any yahoo domain

^[-!#$%&'*+\/0-9=?A-Z^_a-z{|}~](\.?[-!#$%&'*+\/0-9=?A-Z^_a-z`{|}~])*@(?:(?:[a-zA-Z0-9-]+\.)?[a-zA-Z]+\.)?(!gmail|!yahoo)\.[a-zA-Z](-?[a-zA-Z0-9])+$

Different part: (!gmail|!yahoo)

Working

emailValidatorIndiviual, expected acceptance criteria:

1. match any gmail domain
2. match any yahoo domain

^[-!#$%&'*+\/0-9=?A-Z^_a-z{|}~](\.?[-!#$%&'*+\/0-9=?A-Z^_a-z`{|}~])*@(?:(?:[a-zA-Z0-9-]+\.)?[a-zA-Z]+\.)?(gmail|yahoo)\.[a-zA-Z](-?[a-zA-Z0-9])+$

Different part: (gmail|yahoo)