Nrthugu

I have a validation directive that takes an input from a parent component. The validation is passed only when the input is true. So whenever an input changes, I don't know how to trigger validation method in the directive

I have a sample working code on stackblitz for the purpose of demonstrating the issue

//As you can see the appRouteValidator is passing an input randomNumber



<input type="random" appRouteValidator [randomOption]="randomNumber" 

formControlName="random" class="form-control"/>

The validate method here is I want to call on every time the input changes,

export class DemoValidatorDirective {

  @Input() randomOption: Boolean;





  ngOnChanges(changes: SimpleChanges) {

    if (changes.randomOption.currentValue) {

        //---------------------------------> Should trigger validate method

    }

  }

  constructor() { }

  // This should be called when it receives an input

  validate(control: AbstractControl): { [key: string]: any; } {

    console.log('validation method called');

    if (control && (control.value !== null || control.value !== undefined)) {

      const randomField = control.value;

          if (!randomField || !this.randomOption) {

            return {

              'validationError': 'invalid random number'

            }; 

          }

    }

    return null;

  }

}

for manually calling validation method of Respective FormControl, you need call the AbstractControl class method of 'updateValueAndValidity' based on your validation rules.

I have added two lines in the generateRandomNumber method, here is the code:

generateRandomNumber() {

      let randomNumber: any = Math.floor(Math.random() * 2) + 1;

      this.randomNumber = randomNumber % 2 === 0;

      if(this.randomNumber)

        this.registerForm.controls.random.updateValueAndValidity();

      console.log('random number', this.randomNumber);

    }

Please refer the working example on stackblitz

Please let me know if you have any question.