Validate if age is over 18 years old with Angular Reactive Forms

Question

Is there a way to check if a user is over 18 years of age when they have entered their date of birth using Angular Validators?

My form looks like this:

<form [formGroup]="authForm" (ngSubmit)="submitForm()">
    <label>Date of birth</label>
    <input formControlName="day" maxlength="2" placeholder="DD" type="text" />
    <input formControlName="month" maxlength="2" placeholder="MM" type="text" />
    <input formControlName="year" maxlength="4" placeholder="YYYY" type="text" />
    <button [disabled]="!authForm.valid" type="submit"> Check age </button>
</form>

And then I have these validators set in the TS file:

if (this.authType === 'register') {
    this.authForm.addControl('year', new FormControl('', [Validators.required, Validators.maxLength(4), Validators.minLength(4)]));
    this.authForm.addControl('month', new FormControl('', [Validators.required, Validators.maxLength(2)]));
    this.authForm.addControl('day', new FormControl('', [Validators.required, Validators.maxLength(2)]));
 }

So if the conditions above are satisfied in the Validators, the button becomes enabled. But I also need to check that the entered date is over 18 years old before enabling it. This seems tricky as the date is entered via 3 inputs (dd, mm, yyyy). And in this case, I can't use the input date tag. Any suggestions or comments appreciated. Thanks!

P.S. Thanks for all the suggestions about using MomentJS. I'm already using it elsewhere in the app so I'll also use it here.

Solution

You need to configurate a custom validator that will be hooked to the complete FormGroup in this case. A momentjs based approach would look like this:

export function minimumAge(age:number): ValidatorFn {
  return (fg: FormGroup): ValidationErrors => {
      let result: ValidationErrors = null;
      if (fg.get('year').valid && fg.get('month').valid && fg.get('day').valid) {
        // carefull, moment months range is from 0 to 11
        const value: { year: string, month: string, day: string } = fg.value;
        const date = moment({ year: +value.year, month: (+value.month) - 1, day: +value.day }).startOf('day');
        if (date.isValid()) {
          // https://momentjs.com/docs/#/displaying/difference/
          const now = moment().startOf('day');
          const yearsDiff = date.diff(now, 'years');
          if (yearsDiff > -age) {
            result = {
              'minimumAge': {
                'requiredAge': age,
                'actualAge': yearsDiff
              }
            };
          }
        }
      }
      return result;
    };
}

export class DateEditComponent {
  readonly authForm: FormGroup;

  constructor(private _fb: FormBuilder) {
    this.authForm = this._fb.group({
        year: ['', [Validators.required, Validators.maxLength(4), Validators.minLength(4)]],
        month: ['', [Validators.required, Validators.maxLength(2)]],
        day: ['', [Validators.required, Validators.maxLength(2)]]
    });
    this.authForm.setValidators(minimumAge(18));
  }
}

For a live example please check here

Notice that in this case Im not taking care of any format/range validation on the singular input fields.

Comments

[Arun]

hey u can use moment.js to write date validation as mentioned by @joto.toledo and for more reference momentjs.com

[Jose the hose]

Many thanks for your answer. I was thinking that a custom validator would be best too.

[Jose the hose]

This worked perfectly. MANY thanks! And thanks for putting the code example together too!