Accessing formgroup in custom validator

Question

I'm trying to add custom validator to my component.ts

customvalidatorFile:

import { FormGroup, ValidationErrors } from '@angular/forms';

export class ProfileCustomValidators {

    static validateTime(fg: FormGroup): ValidationErrors {
        const staffForm = fg.get('staffForm')
        const fromTime = staffForm.get('fromTime').value;
        const toTime = staffForm.get('toTime').value;
        if(fromTime > toTime) {
            return {
                'endTime': {
                    message: 'End time should be greater than start time'
                }
            }
        }
        return null;
    }
}

component.ts

export class StaffFrom implements onInit {
staffForm: FormGroup;

constructor(private fb: FormBuilder){}


ngOnInit() {
  this.staffForm = this.fb.group({
      fromTime: new FormControl(null, Validators.required),
      toTime: new FormControl(null, Validators.required),
}{ validator: ProfileCustomValidators.validateTime})
}

Component.html

<div>
  <form [formGroup]="staffForm">
       <mat-form-field>
        <input
          type="time"
          required
          formControlName="fromTime"
          matInput
          placeholder="From"
        />
      </mat-form-field>
      <mat-form-field>
        <input
          type="time"
          required
          formControlName="toTime"
          matInput
          placeholder="To"
        />
      </mat-form-field>
  </form>
</div>

By using the above code I get the following error

Cannot read property 'get' of null

I need some help in fixing this and also how to access staffForm in custom.validator file since it is returning null. Thank you.

Also Share component.html file – Chintan Kotadiya Jun 10 '19 at 12:07 — Chintan Kotadiya, Jun 10 '19 at 12:07

score 6 · Accepted Answer · answered Jun 10 '19 at 13:26

Here is updated working code

Customvalidator File: profilecustome.validator.ts

import { AbstractControl, FormGroup, ValidationErrors, ValidatorFn } from '@angular/forms';

export class ProfileCustomValidators {

    static validateTime(): ValidatorFn {
        return (c: AbstractControl) => {
            const fromTime = c.get('fromTime').value;
            const toTime = c.get('toTime').value;
           if(fromTime > toTime) {
            return {
                'toTime': true
            }
          }
          return null;
        };
    }
}

module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

import {
  MatButtonModule,
  MatFormFieldModule,
  MatInputModule,
  MatRippleModule
} from '@angular/material';

import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ ReactiveFormsModule, BrowserModule, FormsModule, BrowserAnimationsModule, MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  exports: [ MatButtonModule, MatFormFieldModule, MatInputModule, MatRippleModule ],
})
export class AppModule { }

component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, ValidationErrors, FormBuilder, FormControl, Validators } from '@angular/forms';
import { ProfileCustomValidators } from "./custom-validators/profilecustome.validator";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  staffForm: FormGroup;

    constructor(private fb: FormBuilder){}


    ngOnInit() {

      this.staffForm = this.fb.group({
            fromTime: new FormControl(null, Validators.required),
            toTime: new FormControl(null, Validators.required),
      }, {
        validator: ProfileCustomValidators.validateTime()
      });
    }
}

component.html

<div>
  <form [formGroup]="staffForm">
       <mat-form-field>
        <input
          type="time"
          required
          formControlName="fromTime"
          matInput

        />
      </mat-form-field>
      <mat-form-field>
        <input
          type="time"
          required
          formControlName="toTime"
          matInput

        />
      </mat-form-field>
      <div *ngIf="staffForm.hasError('toTime')">End time should be greater than start time</div>

  </form>
</div>

Hope this will help you. Please also check this working demo on https://stackblitz.com/edit/angular-gsk5xu

Excellent, thank you so much for your effort and time. :) The one issue I faced is when I added { validator: ProfileCustomValidators.validateTime() } I got the following error Argument of type 'ValidatorFn' is not assignable to parameter of type 'ValidatorFn | ValidatorFn[]' Then I changed it to Validators.compose([ProfileCustomValidators.validateTime()]), then it worked fine. — PremKumar, Jun 10 '19 at 16:49

Accessing formgroup in custom validator

1 Answers1