Question

我有一个验证指令，该指令从父组件获取输入。仅当输入为true时才通过验证。因此，无论何时输入发生变化，我都不知道如何在指令中触发验证方法

我有一个用于code的样本，用于演示问题

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

<input type="random" appRouteValidator [randomOption]="randomNumber" 
formControlName="random" class="form-control"/>

这里的validate方法是我想在每次输入更改时调用它，

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;
  }
}

Answer 1

对于手动调用相应FormControl的验证方法，您需要根据验证规则调用“ updateValueAndValidity”的AbstractControl类方法。

我在generateRandomNumber方法中添加了两行，下面是代码：

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);
    }

请参考stackblitz

上的工作示例

如果您有任何疑问，请告诉我。

如何通过输入装饰器触发对反应形式的验证？

1 个答案: