Validating email input excluding common domains?

Question

on my project i would like to exclude all commons domain like gmail.com/outlook.com etc.. this is the code i've in this moment, how can i implement this type of validation?

onboarding.compontent.html

<div class="w-full my-3 md:items-center">
          <input class="w-full form--primary bg-white border-none h-16 tracking-wide bg--primary__lightblue" placeholder="Email"
            formControlName="email" id="email" maxlength="80" name="email" size="20" type="text"
                 [class.is-invalid]="!hubspot.get('email').valid && hubspot.get('email').touched"/>
          <div
            *ngIf="hubspot.get('email').errors?.required && hubspot.get('email').touched"
            class="invalid-feedback">
            Campo necessario.
          </div>
          <div
            *ngIf="hubspot.get('email').errors?.email && hubspot.get('email').touched"
            class="invalid-feedback">
            Inserisci un email valida.
          </div>
          <br>
        </div>

onboarding.compontent.ts

@Component({

selector: 'app-onboarding',
templateUrl: './onboarding.component.html',
styleUrls: ['./onboarding.component.scss'] })

export class OnboardingComponent implements OnInit {

field: string = '';
hubspot: FormGroup;

@ViewChild('successModal') successModal: TemplateRef<any>;
@ViewChild('errorModal') errorModal: TemplateRef<any>;

constructor(private formBuilder: FormBuilder,
          private router: Router,
          private hubspotService: HubspotService,
          public dialog: MatDialog,
          private titleService: Title) {
            this.titleService.setTitle('P24: Onboarding');
           }

ngOnInit() {

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

onSubmit() {

const body = {
  fields: [
    {
      name: 'email',
      value: this.hubspot.controls.email.value
    }]}

The list that i would like to exclude is similar to this one

Answer 1

You can add another custom validator function to your validator list.Create a validator function like

noCommonDomain(control: AbstractControl) {
  let commonDomains=['gmail.com'];//add all domains you want to excldue here
    if (control.value &&  commonDomains.some(c=> control.value.includes(c))){
      return { email: true };
    }
    return null;
}

then add it to control validators array like

email: new FormControl('', [Validators.email, Validators.required,this.noCommonDomain])