Angular，如何为两个字段中的任何一个设置验证都应以反应形式方法进行验证 [英] Angular, How to set validation for either of two field should validate in reaction form approach

问题描述

我正在尝试设置用户表单验证，用户必须输入两个字段之一，即移动字段或电子邮件字段

I'm trying to set user form validation, user must enter either of two fields, mobile or email fields

添加访客反应表格Html:

Add Guest reaction form Html:

<form class="new_guest" id="new_guest" [formGroup]="addGuestForm" (ngSubmit)="onSubmit()">
            <div class="form-group">
                <input placeholder="Enter guest name" class="add-guests form-control ui-autocomplete-input" type="text" formControlName="name"
                    id="guest_name" autocomplete="off">
            </div>
            <div class="form-group">
                <input placeholder="Enter guest email" class="add-guests form-control ui-autocomplete-input" type="text" formControlName="email"
                    id="guest_email" autocomplete="off">
            </div>
            <div class="form-group">
                <input placeholder="Mobile Number, If any" class="add-guests form-control ui-autocomplete-input" type="text" formControlName="mobile"
                    id="guest_mobile" autocomplete="off">
            </div>
            <input type="submit" class="btn btn-default btn-block" id="add_guest" value="ADD GUEST" [disabled]="!addGuestForm.valid">
        </form

AddGuest初始化:

AddGuest init:

this.addGuestForm = new FormGroup({
  'name': new FormControl(null, Validators.required),
  'email': new FormControl(null, Validators.email),
  'mobile': new FormControl(null)
})

任何人都可以帮忙吗?

推荐答案

您可以使用表单构建器并提供自定义验证，例如:

You can use form builder and provide customized validation for example:

this.addGuestForm = this.formBuilder.group({
'name': new FormControl(null, Validators.required),
  'email': '',
  'mobile': ''
}, {
      validator: (formControl) => {
        var emailCtrl = formControl.controls.email;
        var mobileCtrl = formControl.controls.mobile;


        if (emailCtrl != undefined && mobileCtrl != undefined)
             if(!(emailCtrl.value.length || mobileCtrl.value.length ))
                    return {invalid: true};
}
});

此外，您还可以检查电子邮件字段的正则表达式 定义变量regexPattern进行电子邮件模式检查，并在条件允许的情况下在自定义验证器中使用

additionally you can also check for regex for email field define a variable regexPattern for email pattern check and use below in the custom validator if condition

regexPattern.test(emailCtrl.value)

这篇关于Angular，如何为两个字段中的任何一个设置验证都应以反应形式方法进行验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！