Assistance needed with updating custom validators in Angular 14

Question

Assistance needed with updating custom validators in Angular 14

I've set up my form along with a custom validator that I believe should be functioning correctly. This form consists of 15 fields, out of which the custom validator is designed to refer to three specific ones ('icmp','tcpPorts','udpPorts'). In addition to other mandatory fields, it is necessary for at least ONE of these three fields to be filled in order to proceed with submission.

Below is the code snippet from my component.ts file:

 newFWXForm = this.fb.group(
{
  sspSelect: ["", Validators.required],
  requester: [this.loggedInUser],
  requesterContactInfo: [this.loggedInUserEmail],
  fwxDescription: ["", Validators.required],
  durationTypeSelect: ["Permanent", Validators.required],
  durationDate: [""],
  infraSelect: [""],
  sourceIPs: ["", Validators.required],
  DestAnyCheck: [false],
  SrcAnyCheck: [false],
  icmp: [false],
  destinationIPs: ["", Validators.required],
  tcpPorts: [],
  udpPorts: [],
  addDirectory: new FormControl(false),
},
{
  Validators: this.atleastOnePortValue("icmp", "tcpPorts", "udpPorts"),
}
);

 private atleastOnePortValue( controlNameA: string,controlNameB: string,controlNameC: string): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
  const formGroup = control as FormGroup;
  const valueOfControlA = formGroup.get(controlNameA)?.value;
  const valueOfControlB = formGroup.get(controlNameB)?.value;
  const valueOfControlC = formGroup.get(controlNameC)?.value;

  if (
    valueOfControlA === false &&
    valueOfControlB === null &&
    valueOfControlC === null
  ) {
    return { atLeastOne: true};
  } else {
    return null;
  }
};
}

Can anyone provide insights or assistance on why this setup is not working as expected? Your help is greatly appreciated, thank you in advance!

angular typescript angular14 angular-custom-validators

Answer 1

Answer №1

Important: This answer demonstrates how to create a validator for "one control" rather than the entire form.

It's similar to this Stack Overflow thread, but it includes an additional field.

export function conditionalValidator(field: string[]): ValidatorFn {
  return (formControl) => {
    if (!formControl.parent) {
      return null;
    }
    const otherControls = field.map((x) => formControl.parent.get(x));
    if (otherControls.filter((x) => x).length == field.length) {
      const error =
        formControl.value || otherControls.find((x) => x.value)
          ? null
          : { error: 'this field or ' + field + ' is required' };

      const controlCheck = error
        ? otherControls.filter((x) => x.valid)
        : otherControls.filter((x) => x.invalid);
      if (controlCheck.length) {
        setTimeout(() => {
          controlCheck.forEach((x) =>
            x.updateValueAndValidity({ emitEvent: false })
          );
        });
      }
      return error;
    }
  };
}

For example, you can use it like this:

form = new FormGroup({
    control1: new FormControl(
      null,
      conditionalValidator(['control2', 'control3'])
    ),
    control2: new FormControl(
      null,
      conditionalValidator(['control1', 'control3'])
    ),
    control3: new FormControl(
      null,
      conditionalValidator(['control1', 'control2'])
    ),
  });

Take a look at the StackBlitz example.

Answer 2

Important: This answer demonstrates how to create a validator for "one control" rather than the entire form.

It's similar to this Stack Overflow thread, but it includes an additional field.

export function conditionalValidator(field: string[]): ValidatorFn {
  return (formControl) => {
    if (!formControl.parent) {
      return null;
    }
    const otherControls = field.map((x) => formControl.parent.get(x));
    if (otherControls.filter((x) => x).length == field.length) {
      const error =
        formControl.value || otherControls.find((x) => x.value)
          ? null
          : { error: 'this field or ' + field + ' is required' };

      const controlCheck = error
        ? otherControls.filter((x) => x.valid)
        : otherControls.filter((x) => x.invalid);
      if (controlCheck.length) {
        setTimeout(() => {
          controlCheck.forEach((x) =>
            x.updateValueAndValidity({ emitEvent: false })
          );
        });
      }
      return error;
    }
  };
}

For example, you can use it like this:

form = new FormGroup({
    control1: new FormControl(
      null,
      conditionalValidator(['control2', 'control3'])
    ),
    control2: new FormControl(
      null,
      conditionalValidator(['control1', 'control3'])
    ),
    control3: new FormControl(
      null,
      conditionalValidator(['control1', 'control2'])
    ),
  });

Take a look at the StackBlitz example.

Answer 3

Answer №2

Just a simple issue :-)

When adding validators to a form using the Formbuilder, remember to use the parameter "validators" instead of "Validators".

newFWXForm = this.fb.group(
  {
    ...
  },
  {
    validators: this.atleastOnePortValue("icmp", "tcpPorts", "udpPorts"),
  }
);

The rest of your code seems good, but make sure to also check for empty strings, not just null. This is important because when a user clears a field, it will not be set back to null. The initial value should be null.

Answer 4

Just a simple issue :-)

When adding validators to a form using the Formbuilder, remember to use the parameter "validators" instead of "Validators".

newFWXForm = this.fb.group(
  {
    ...
  },
  {
    validators: this.atleastOnePortValue("icmp", "tcpPorts", "udpPorts"),
  }
);

The rest of your code seems good, but make sure to also check for empty strings, not just null. This is important because when a user clears a field, it will not be set back to null. The initial value should be null.

Assistance needed with updating custom validators in Angular 14

Answer №1

Answer №2

Similar questions

In Angular, updating an input field with text when a button is clicked can be done by utilizing two separate components to render the input field and button

Eliminate the "email address" input field from Stripe checkout in Angular 2

Issue encountered when attempting to assign a value to an array property in Angular

Struggling with manipulating arrays in Angular 7

Is it possible to localize a German date without using the dot?

What is the most effective method for testing event emitters?

Tips on eliminating expansion upon button click in header within an Angular application

The parameter type '(value: any) => any[]' does not match the expected parameter type 'string[]'

Utilize Angular 9 with an M1 Mac device

Suggestions for shrinking the ngzorro slider width are welcome, as it is currently taking up the whole screen

Utilizing ES6 Map type in TypeScript for Angular 2 Response Data Transfer Object Definition

What is the best way to utilize the currency pipe with just the country code?

Unexpected TypeScript issue: Unable to access the 'flags' property of an undefined entity

Learn how to securely download files from an Azure Storage Container using Reactjs

Here's a new take on the topic: "Implementing image change functionality for a specific div in Angular 8 using data from a loop"

How to adjust the font size and font style for the [pageSizeOption] in mat-paginator

Issues with sorting in Angular Material table after making a call to http.get()

Utilizing the power of Promise and async operators in conjunction with Angular's ng

Combine the object with TypeScript

Integrating modules in Angular 2