Angular formControl validators that depend on other formcontrols

Question

I need to create a form that will contain 2 dates, dateFrom and dateTo. The condition for validation is that dateFrom cannot be after dateTo and dateTo cannot be before dateFrom.

So I created a form group with two form controls and a validator in common that will check this condition.

export class DateRangeSelector { dateForm: FormGroup = new FormGroup({ dateFrom: new FormControl({ year: 2017, month: 10 },[this.dateValidator.bind(this)]), dateTo: new FormControl({ year: 2020, month: 11 }, [this.dateValidator.bind(this)]) }); dateValidator(control: FormControl): { [s: string]: boolean } { const valueDateFrom = this.dateForm.get('dateForm').value; const valueDateTo = this.dateForm.get('dateTo').value; if (valueDateFrom && valueDateTo) { //please ignore the fact that value is {year: x, month: y}, I need to parse const dateFrom = moment(valueDateFrom); const dateTo = moment(valueDateTo); if (dateFrom.isAfter(dateTo)) { return { invalidDate: true }; } } return null; } }

My problem is that this.dateForm is not defined (not in the context) when validators try to validate. And I don't understand because I binded the method in the validators declaration.

if you want to validate multiple formcontrols add your validator to the formgroup. simliar case is answered in this topic: stackoverflow.com/questions/51094146/… — enno.void
– enno.void, Commented Sep 23, 2021 at 11:24

shutsman · Accepted Answer · 2021-09-23 11:39:30Z

you can define your control as

new FormGroup({ dateFrom: new FormControl('', [validateStartResult]), dateTo: new FormControl('', [validateEndResult]), })

then create separate file for validation

import {AbstractControl, ValidationErrors, ValidatorFn} from "@angular/forms"; enum ValidationFor { end = 'end', start = 'start' } export const validateEndResult: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { return validateResult(control, ValidationFor.end); } export const validateStartResult: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { return validateResult(control, ValidationFor.start); } function validateResult(control, currentValidation: ValidationFor): ValidationErrors | null { const startControl = control?.root?.get('dateFrom'); const endControl = control?.root?.get('dateTo'); const currentTime = new Date().getTime(); const startTimeStamp = new Date(startControl?.value).getTime(); // configurations yours date const endTimeStamp = new Date(endControl?.value).getTime(); // configurations yours date const error: { [key: string]: boolean } = {}; let hasError = false; if (startTimeStamp > endTimeStamp) { // main codition if (currentValidation === ValidationFor.end) { error.endResult = true } if (currentValidation === ValidationFor.start) { error.startResult = true } hasError = true; } return hasError ? error : null; }

you can follow this guide to complete own validation

Ashish Ranjan · Accepted Answer · 2021-09-23 12:10:50Z

I believe the reason this.dateForm comes as undefined because the Validatdor gets executed while creation of the individual Form Controls itself, i.e. when the property dateForm is still under creation.

You can validate this by doing this in your validator in existing code.

 dateValidator() { console.log(this.dateForm); }

You would see the group geting printed after two undefined

A good approach to handle this would be use a group validatdor, like:

dateForm: FormGroup = new FormGroup( { dateFrom: new FormControl({ year: 2017, month: 10 }), dateTo: new FormControl({ year: 2020, month: 11 }), }, this.dateValidator.bind(this) ); dateValidator(group: FormGroup) { const valueDateFrom = group.get('dateFrom').value; const valueDateTo = group.get('dateTo').value; if (valueDateFrom && valueDateTo) { //please ignore the fact that value is {year: x, month: y}, I need to parse const dateFrom = new Date(valueDateFrom).getTime(); // moment(valueDateFrom) const dateTo = new Date(valueDateTo).getTime(); // moment(valueDateTo); if (dateFrom > dateTo) { console.log('Error =====> '); return { invalidDate: true }; } } console.log('Success =====> '); return null; }

Example

César Castro Aroche · Accepted Answer · 2021-09-23 11:51:54Z

After checking formGroup validators:

dateForm: FormGroup;

dateForm: FormGroup; constructor(formBuilder: FormBuilder, private toastService: ToastService) { this.dateForm = formBuilder.group({ dateFrom: { year: 2017, month: 10 }, dateTo: { year: 2018, month: 11 } }); this.dateForm.setValidators(this.dateValidator()); } dateValidator(): ValidatorFn { return (group: FormGroup): ValidationErrors => { const controlDateFrom = group.controls.dateFrom; const controlDateTo = group.controls.dateTo; if (controlDateFrom.value && controlDateTo.value) { const dateFrom = moment(controlDateFrom.value); const dateTo = moment(controlDateTo.value); if (dateFrom.isAfter(dateTo)) { controlDateFrom.setErrors({ invalidDateRange: true}); controlDateFrom.setErrors({ invalidDateRange: true}); }else{ controlDateFrom.setErrors(null); controlDateTo.setErrors(null); } } return; }; }

This solution is particulary interesting because as it is binded to the component I can show a toast for example when the date is wrong. Or I can format the date value before it's setted and this way avoid all errors.

Collectives™ on Stack Overflow

Angular formControl validators that depend on other formcontrols

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related