Angular - assign custom validator to a FormGroup

Question

I need to assign a custom validator to a FormGroup. I can do this at the time the FormGroup is created like this:

let myForm : FormGroup;

myForm = this.formBuilder.group({
        myControl1: defaultValue,
        myControl2: defaultValue
      }, { validator: this.comparisonValidator })

comparisonValidator(g: FormGroup) {
      if (g.get('myControl1').value > g.get('myControl2'.value)) {
        g.controls['myControl1'].setErrors({ 'value2GreaterThanValue1': true });
        return;
      }
}

I have a situation though where I need to add the custom validator after I've instantiated the FormGroup, so I'm trying to do this after instantiating myForm, instead of adding the validator when the form is instantiated:

let myForm : FormGroup;

myForm = this.formBuilder.group({
        myControl1: defaultValue,
        myControl2: defaultValue
      })

this.myForm.validator = this.comparisonValidator;

This gives me a compiler error:

Type '(g: FormGroup) => void' is not assignable to type 'ValidatorFn'.
  Type 'void' is not assignable to type 'ValidationErrors'.

How do I assign a validator to my FormGroup so that the formGroup is passed as the argument to my comparisonValidator function?

Update - I've added a line showing where I'm doing a setErrors in my comparisonValidator, to make it clearer exactly how I'm trying to set a validation error.

Answer 1

I've created a stackblitz take a look.

In the component.ts file

import { Component } from '@angular/core';
import {FormBuilder,FormGroup, ValidationErrors, ValidatorFn} from '@angular/forms'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  myForm: FormGroup;
  defaultValue = 20;

constructor(private formBuilder: FormBuilder) {
  this.myForm = this.formBuilder.group({
        myControl1: this.defaultValue,
        myControl2: this.defaultValue
      });
      debugger
      this.myForm.setValidators(this.comparisonValidator())
}

 public comparisonValidator() : ValidatorFn{
       return (group: FormGroup): ValidationErrors => {
          const control1 = group.controls['myControl1'];
          const control2 = group.controls['myControl2'];
          if (control1.value !== control2.value) {
             control2.setErrors({notEquivalent: true});
          } else {
             control2.setErrors(null);
          }
          return;
    };
 }
}

In the component.html file

<div>
  <form [formGroup]="myForm">
    <input formControlName="myControl1" type="number">
    <input formControlName="myControl2"  type="number">
    <br>Errors: {{myForm.get('myControl2').errors | json}}
  </form>
</div>

Answer 2

For setting any validators (predefined or customs) after instantiating the formGroup, you will need to use the setValiators() method of FormGroup, f.e.:

  let myFormGroup = this.    _fb.group({
      control1: new FormControl('1', [])
    });
  myFormGroup.setValidators(this.customValidators());
  customValidators(): ValidatorFn {
   let myFun = (cc: FormGroup): ValidationErrors => {
     if(cc.valid) return null;
     else return {something: 'someError'};
   };
   return myFun;
  }

Answer 3

Thanks to @Anuradha Gunasekara - his answer is the most correct and complete solution. A 'quick fix' for my error was just to add a return type of any on the validator. I can still assign the custom validator to the FormGroup, and the FormGroup will be passed implicitly as the argument to my custom validator. This code will work:

let myForm : FormGroup;

myForm = this.formBuilder.group({
           myControl1: defaultValue,
           myControl2: defaultValue
         })

this.myForm.validator = this.comparisonValidator;

comparisonValidator(g: FormGroup) : any {
      if (g.get('myControl1').value > g.get('myControl2'.value)) {
        g.controls['myControl1'].setErrors({ 'value2GreaterThanValue1': true });
      }
}

Answer 4

Remove all form control white space form Form Group

custom validator :

    export function formGroupRemoveWhitespaceValidator(form: FormGroup): ValidationErrors | null {
    const keys: string[] = Object.keys(form.controls);

    if (keys.length) {
        keys.forEach(k => {
            let control = form.controls[k];
            
            if (control && control.value && !control.value.replace(/\s/g, '').length) {
                control.setValue('');
            }
        });
    }

    return null;
}

component :

let myForm : FormGroup;

myForm = this.formBuilder.group({
           myControl1: defaultValue,
           myControl2: defaultValue
         }, { validators: formGroupRemoveWhitespaceValidator });

Answer 5

These answers doesn't work for me, because I have other validators too. In my usecase, I have to set the errors also for the opposite field.
Perhaps it doesn't met the requirements of the OP exactly, but it hopefully helps others (like me), which landed on this site.

Here my is solution, which can be safely combined with other validators and also ensure, that the opposite field got an update.

// ...
this.form = this.formBuilder.group({
        myControl1: this.formBuilder.control(defaultValue, [Validators.required, this.validateIsEqualTo('myControl2')]),
        myControl2: this.formBuilder.control(defaultValue, this.validateIsEqualTo('myControl1')
      });

this.form.get('myControl1').valueChanges
   .pipe(
      takeUntil(this.destroy$),
      disinctUntilChanged())
   .subscribe(() => this.form.get('myControl2').updateValueAndValidity());

this.form.get('myControl2').valueChanges
   .pipe(
      takeUntil(this.destroy$),
      disinctUntilChanged())
   .subscribe(() => this.form.get('myControl1').updateValueAndValidity());
// ...

public validateIsEqualTo(otherComponentId): ValidatorFn {
   return (control: FormControl): ValidationErrors => {
      const otherControl = this.form.get(otherComponentId);
      return control.value !== otherControl.value ? {notEquivalent: true} : null;
   }
}