Cross Field Validation In Angular

The Code Points June 10, 2022 0

In this article, We will learn how to create Cross-Field Validation, also known as Multi-Field Validation in Angular. We learned how to develop a custom validator and how to validate reactive forms. Those tutorials demonstrated how to validate a Single Form Control. However, we occasionally come across fields whose value is dependent on another variable. The following scenario, for example, needs us to compare two fields.

1. Fields for the start and finish dates. The end date has to be later than the beginning date.
2. Confirm your password. The new password needs to be the same as the confirmed password.

Validation Recap

We use the second argument of FormControl to attach a validator to a form that has been submitted, as seen below. As a third argument, you can pass an Async Validator.

this.contactForm = new FormGroup({
    userName: new FormControl('',[Validators.required,customValidator]),

The FormBuilder is used in the above syntax.

this.contactForm = this.builder.group({
      userName: ["", [Validators.required,customValidator]],

The Validator will only run when the value of userName is changed, and it will only validate the userName field.

Cross Field Validation

We must guarantee that our validation logic runs for each of the fields when validating multiple fields.

As a result, the validator is attached to the Formgroup rather than the FormControl. When we change any of the fields in the FormGroup, the Validator runs.

Example

To compare the password and confirm Password fields, let's develop a matchPassword custom validator.

It receives the instance of FormGroup as an argument because it is attached to a FormGroup. The get method can be used to retrieve the values of both the password and confirm FormControls. If they don't match, the ValidationErrors are returned. If the value passes the Validation, return null.

matchPassword(control: AbstractControl): ValidationErrors | null {

  const password = control.get("password").value;
  const confirm = control.get("confirm").value;


  if (password != confirm) { return { 'noMatch': true } }

  return null

}

As demonstrated below, we use the matchPassword Validator's second argument to link it to FormGroup.

this.mainForm = this.builder.group({
  userName: ["", [Validators.required]],
  password: ["", [Validators.required, Validators.minLength(5)]],
  confirm: ["", [Validators.required]]
}, { validator: this.matchPassword });

The Validators.compose method of the FormGroup also allows us to add several validators.

this.mainForm = this.builder.group({
  userName: ["", [Validators.required]],
  password: ["", [Validators.required, Validators.minLength(5)]],
  confirm: ["", [Validators.required]]
}, {
  validator: Validators.compose(
    [
      this.matchPassword,
      Validators.required
    ]
  )
});

Passing Parameter

The parameter can also be passed to the Multiple Field Validator.

The name of the object is passed in the following example.

this.mainForm = this.builder.group({
  userName: ["", [Validators.required]],
  password: ["", [Validators.required, Validators.minLength(5)]],
  confirm: ["", [Validators.required]]
}, { validator: this.matchPassword2('password', 'confirm') });

matchPassword2(firstControl, secondControl): ValidatorFn {

  return (control: AbstractControl): ValidationErrors | null => {

    const password = control.get(firstControl).value;
    const confirm = control.get(secondControl).value;

    if (password != confirm) { return { 'noMatch': true } }

    return null

  }
}

In Angular, see Custom Validator with Parameters. Refer to the instruction on how to inject service into a Validator for further information.

Conclusion

In this article, We learned how to create Cross-Field Validation in Angular, also known as multi field Validation in Angular.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.