Angular 2+ ReactiveForm Custom Validation Function Not Triggered

Question

I'm building my FormGroup in the following manner:

this.datesGroup = this.fb.group({
  arrivalDate: [null, Validators.required],
  departureDate: [null, Validators.required]
}, (fg: FormGroup) => {
  console.log('validate');
  return moment.unix(fg.value.departureDate.epoc).diff(moment.unix(fg.value.arrivalDate.epoc)) > 0 ?
    null : {
      'departureBeforeArrival': true
    };
});
this.formGroup = this.fb.group({
  dates: this.datesGroup,
  accommodation: ['', Validators.required]
});

But the validation arrow function above is never triggered; the console never logs. What am I doing wrong?

yurzui · Accepted Answer · 2017-06-20 05:47:43Z

1

FormBuilder.group method takes 2 parameters:

group(controlsConfig: {
        [key: string]: any;
    }, extra?: {
        [key: string]: any;
    } | null): FormGroup;

where extra can be object with property validator and/or asyncValidator.

So i would change your code to this:

this.datesGroup = this.fb.group({
  arrivalDate: [null, Validators.required],
  departureDate: [null, Validators.required]
}, {
  validator: (fg: FormGroup) => {
    console.log('validate');
    return 1 > 0 ?
      null : {
        'departureBeforeArrival': true
      };
  }
});

Live example could be found here https://plnkr.co/edit/BcExweMVcVxy1yKhwmJp?p=preview

answered Jun 20, 2017 at 5:47

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

developer033 Over a year ago

+1 :). I think the docs could be better explaining what this "extra" means, as it does for FormControl and FormArray. (I know it's explained well in FormGroup, but it should be also in FormBuilder).

Collectives™ on Stack Overflow

Angular 2+ ReactiveForm Custom Validation Function Not Triggered

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related