正在验证除常见域之外的电子邮件输入

Question

在我的项目中，我想排除所有公共域，如gmail.com/outlook.com等。。这就是我现在的代码，我该如何实现这种类型的验证？

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

我想排除的列表与类似

Answer 1

您可以向验证器列表中添加另一个自定义验证器函数。创建类似的验证器函数

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

然后将其添加到类似的控制验证器阵列中

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