Angular：如何在邮箱输入为空时实现HTML验证

1. 修正表单控件的验证规则 #

在初始化userForm的代码中（比如组件的ngOnInit或构造函数内），给email和confirmEmail控件同时添加Validators.required（必填验证）和Validators.email（格式验证）：

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

// 假设使用FormBuilder构建表单
constructor(private fb: FormBuilder) {}

ngOnInit(): void {
  this.userForm = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    confirmEmail: ['', [Validators.required, Validators.email]]
  });
}

2. 清理无效的提交判断 #

删除onSubmit里的if (this.userForm == '') { return; }——这行逻辑完全错误，表单对象不可能等于空字符串。this.userForm.invalid已经会包含必填项未填写的情况：

onSubmit() {
  if (this.userForm.invalid) {
    return;
  }
  const newEmail: UpdateEmailRequest = {
    emailAddress: this.userForm.value.email,
    confirmEmailAddress: this.userForm.value.confirmEmail,
  };

  this.memberService.updateEmail(newEmail, this.userProfile.id).subscribe(
    (res: any) => {
      this.notificationService.success(
        ACCOUNT_MESSAGES.NOTIFICATION.SUCCESS_PROFILE_UPDATED
      );
    },
    () => {
      this.notificationService.error(MESSAGES.NOTIFICATION.FAILURE);
    }
  );
}

3. 模板中显示空值错误提示 #

在HTML模板的输入框下方，添加必填错误的提示（和格式错误提示分开）：

<!-- 邮箱输入框 -->
<input formControlName="email" type="email" />
<div *ngIf="controls.email.invalid && (controls.email.dirty || controls.email.touched)">
  <div *ngIf="controls.email.errors?.['required']">邮箱不能为空</div>
  <div *ngIf="controls.email.errors?.['email']">请输入有效的邮箱格式</div>
</div>

<!-- 确认邮箱输入框 -->
<input formControlName="confirmEmail" type="email" />
<div *ngIf="controls.confirmEmail.invalid && (controls.confirmEmail.dirty || controls.confirmEmail.touched)">
  <div *ngIf="controls.confirmEmail.errors?.['required']">确认邮箱不能为空</div>
  <div *ngIf="controls.confirmEmail.errors?.['email']">请输入有效的邮箱格式</div>
</div>

修改完成后，当用户未填写邮箱或确认邮箱时，表单会被标记为invalid，提交操作会被拦截，同时模板会显示对应的空值错误提示，和格式错误提示区分开。

内容的提问来源于stack exchange，提问作者shazzy