Setting validation in Angular for either of two fields to validate in reactive form approach

Question

Setting validation in Angular for either of two fields to validate in reactive form approach

I'm currently working on setting up user form validation, where the user must input either their mobile number or email address.

Below is the HTML code for adding a guest reaction form:

<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

This is how the structure of AddGuest init looks like:

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

If you have any suggestions or solutions, please feel free to share. Thank you!

angular validation typescript angular4-forms

Answer 1

Answer №1

To create a custom form with validation in Angular, you can utilize the form builder and define specific criteria for validation. Here's an example:

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

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

Additionally, you can incorporate regex pattern matching for the email field by defining a variable called regexPattern for the email pattern check. Use the following line in the custom validator if condition:

regexPattern.test(emailCtrl.value)

Answer 2

To create a custom form with validation in Angular, you can utilize the form builder and define specific criteria for validation. Here's an example:

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

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

Additionally, you can incorporate regex pattern matching for the email field by defining a variable called regexPattern for the email pattern check. Use the following line in the custom validator if condition:

regexPattern.test(emailCtrl.value)

Answer 3

Answer №2

Dealing with a similar issue led me to create a custom validator:

export function requiredControlValidator(...controls: AbstractControl[]): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        for (const aControl of controls) {
            if (!Validators.required(aControl)) {
                return null;
            }
        }
        return { requiredControl: true };
    };
}

You can integrate it like this:

this.form.setValidators([
  requiredControlValidator(
      this.form.get('firstName'),
      this.form.get('lastName'),
  )
]);

If needed, you may consider adjusting the requiredControlValidator function to take input parameters as controlNames: string[] instead of AbstractControl[].

For a demonstration, refer to this example.

Answer 4

Dealing with a similar issue led me to create a custom validator:

export function requiredControlValidator(...controls: AbstractControl[]): ValidatorFn {
    return (control: AbstractControl): ValidationErrors | null => {
        for (const aControl of controls) {
            if (!Validators.required(aControl)) {
                return null;
            }
        }
        return { requiredControl: true };
    };
}

You can integrate it like this:

this.form.setValidators([
  requiredControlValidator(
      this.form.get('firstName'),
      this.form.get('lastName'),
  )
]);

If needed, you may consider adjusting the requiredControlValidator function to take input parameters as controlNames: string[] instead of AbstractControl[].

For a demonstration, refer to this example.

Answer 5

Answer №3

Modifying the response provided by @pogiaron to include setting the error key that is returned.

function checkForOneRequired(errorType: string, ...controlItems: AbstractControl[]) {
    return (control: AbstractControl): ValidationErrors | null => {
        for (const item of controlItems) {
            if (!Validators.required(item)) {
                return null;
            }
        }
        return { [errorType]: true };
     };
}

Answer 6

Modifying the response provided by @pogiaron to include setting the error key that is returned.

function checkForOneRequired(errorType: string, ...controlItems: AbstractControl[]) {
    return (control: AbstractControl): ValidationErrors | null => {
        for (const item of controlItems) {
            if (!Validators.required(item)) {
                return null;
            }
        }
        return { [errorType]: true };
     };
}

Setting validation in Angular for either of two fields to validate in reactive form approach

Answer №1

Answer №2

Answer №3

Similar questions

Access specific properties of an object in TypeScript using dot notation with the

JavaScript Date() function misinterpreting Unix timestamp

The variable 'VAR_PLURAL' is not defined within this type

Angular service is able to return an Observable after using the .then method

Having trouble with Angular routing when attempting to directly access a specific URL path?

Confirm that the input value consists of x numeric characters

The implementation of TypeScript 3.5 resulted in a malfunction where the imported namespace was unable to locate the Enum during runtime

Mastering the Use of Interfaces in Ionic/Angular

ngx-datatables in Angular is experiencing issues with its filtering options

Tips for saving a variable in Angular that is being received through a subscription as JSON:

Printing HTML in Angular 8

What could be causing the Intellisense errors in Visual Studio 2015 that say "Cannot find module 'angular2/core'"?

Ineffectiveness of ngFor in displaying content within a component in Ionic 5

Creating an Escape key press event in plain Typescript without using JQuery

The withLatestFrom operator in RxJS is not functioning as anticipated

What is the method for importing styles in Next.js without including the file extension?

Ways to transfer arguments from a subclass component to its superclass

Issue encountered: The function this.http.post in Ionic 3 is not recognized as a valid function

Ways to add parameters to each external URL using Angular

A guide to incorporating Material-UI ThemeProvider and WithStyles with Typescript