咱们先拆解第一个问题：为啥你的代码会接受a、a@这类看起来明显不对的输入？

其实核心原因有两个：

• 默认验证规则偏宽松：HTML5的<input type="email">和Angular的email指令，都是遵循RFC 5322的邮件格式标准——这个标准允许很多看似“不常规”但合法的格式，比如单个字符的域名（a@a），甚至带特殊符号的本地部分。不过严格来说，a、a@这类没有@或者@后为空的输入，本来应该是通不过默认email验证的，可能是你测试时没触发表单的submitted状态，导致错误样式没显示，误以为输入“通过”了。
• 你的代码只检查了非空：当前代码里的required只保证输入不为空，但email指令的宽松规则没拦住那些不完整的格式。

接下来解决你的核心需求：让输入仅接受a@a、a@a.com这类格式（也就是必须有@，且@前后都至少有一个有效字符）。

最简单的解决方案：添加自定义正则验证 #

直接在输入框上加上pattern属性，用正则表达式强制符合你要的格式：

<div class="input-group" [ngClass]="{'has-error': !PEmail.valid && submitted }">
  <input 
    class="form-control" 
    id="PEmail" 
    name="PEmail" 
    type="email" 
    #PEmail="ngModel" 
    [(ngModel)]="quote.FromAddress.Email" 
    required 
    email
    pattern="^[^\s@]+@[^\s@]+$"
  />
  <!-- 可以加上明确的错误提示，让用户清楚哪里错了 -->
  <div *ngIf="!PEmail.valid && submitted" class="error-message">
    <span *ngIf="PEmail.errors?.['required']">邮箱不能为空</span>
    <span *ngIf="PEmail.errors?.['email'] || PEmail.errors?.['pattern']">
      请输入有效的邮箱格式，比如a@a或a@a.com
    </span>
  </div>
</div>

这个正则^[^\s@]+@[^\s@]+$的意思是：

• ^[^\s@]+：@前面必须有至少一个非空格、非@的字符
• @：必须包含@符号
• [^\s@]+$：@后面必须有至少一个非空格、非@的字符

这样就能直接排除a（无@）、a@（@后为空）、@a（@前为空）这类无效输入，同时允许a@a、a@a.com这类你想要的格式。

如果需要更灵活的验证（比如自定义错误逻辑） #

如果以后要调整规则，或者需要更细致的错误提示，可以在组件类里写一个自定义验证器：

import { ValidatorFn, AbstractControl } from '@angular/forms';

// 自定义邮箱验证器函数
export function customEmailValidator(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const email = control.value;
    if (!email) return null; // 空值交给required验证处理
    // 这里用和上面一样的正则，也可以根据需求修改
    const validEmailPattern = /^[^\s@]+@[^\s@]+$/;
    return validEmailPattern.test(email) ? null : { 'invalidEmailFormat': { value: email } };
  };
}

然后在模板里（需要先把验证器注册为指令，或者如果用响应式表单，直接加到FormControl的验证器数组里），这样就能更灵活地控制验证逻辑和错误信息。

最后提醒一下：测试的时候记得触发submitted状态（比如点击提交按钮），这样才能看到错误提示，避免误以为无效输入通过了验证。

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