验证 angular 反应中的 formControl，其中包含“@gmail.com”

Question

我已经创建了一个 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>

Component.ts :

export class UserInfoComponent implements OnInit {
    userFormGroup: FormGroup  

    constructor(private fb: FormBuilder) { }   

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

Answer 1

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

您可以将验证器添加为：

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

验证 angular 反应中的 formControl，其中包含“@gmail.com”

Validate a formControl in angular reactive from which contains "@gmail.com"

angular-validation

angular

angular-reactive-forms