验证包含“@gmail.com”的角反应形式的formControl答案

【问题标题】：Validate a formControl in angular reactive from which contains "@gmail.com"验证包含“@gmail.com”的角反应形式的formControl
【发布时间】：2018-12-26 14:13:47
【问题描述】：

我创建了一个 userInfo 表单，我想验证电子邮件字段是否应该包含 @gmail.com，我只想要 gmail 用户，我使用了响应式表单，我希望验证 emailAddress 字段。

这是我的用户工作表

<div>
  <form  [formGroup]="jobform">
    <div class="form-group">
      <label>Email Address</label>
      <input type="text" formControlName="emailAddress" class="form-control"  />                

    <button [disabled]="!jobform.valid" class="btn btn-primary">Submit</button>

  </form>
</div>

组件.ts：

export class UserInfoComponent implements OnInit {
    userFormGroup: FormGroup  

    constructor(private fb: FormBuilder) { }   

    ngOnInit() {
        this.jobform= this.fb.group({
            emailAddress:['', Validators.required],
        });
    }
}

【问题讨论】：

欢迎来到 SO！请记住包含Minimal, Complete, and Verifiable example。比如到目前为止你尝试了什么，失败了什么，你做了什么研究。
感谢您的建议，我已经尝试过并用代码进行了解释。我知道自定义验证器，但我不知道如何验证 gmail。

标签： angular angular-reactive-forms angular-validation

【解决方案1】：

您可以在表单控件中添加一个正则表达式检查来检查您的要求。适合您要求的正则表达式可能是 /^.+@gmail.com$/

您可以将验证器添加为：

this.jobform= this.fb.group({
     emailAddress: ['', [Validators.required, Validators.email, Validators.pattern('^.+@gmail.com$')]]
});

【讨论】：

@AmiVyas：请检查更新的答案，我添加了一个验证器来检查正确的电子邮件（没有无效字符）。我还在正则表达式中用+ 替换了*。