如何直接从formControl获取Validators？

Question

我有一个电子邮件字段,我添加了两个验证器(必需,电子邮件),我想检查验证状态,input event以便在我的系统成员有效时调用API检查剂量,如果它invalid不调用API并且不要t在页面上显示错误消息.

我将在模糊事件(focusOut电子邮件的输入)上显示错误消息,首先我用于formControl.validator(formControl)触发验证器并检查formControl.valid,我获得了有效状态,但它会在页面上显示错误消息,因为我订阅statsuChange时显示错误消息,当状态等于invalid.

目前,我在一个变量中保存验证器并传递initEmailChaingeEvent()给检查验证状态而没有statusChange事件.它可以工作,但我认为这不是一个好方法,这是我的实现的一个例子:

实例

export class AppComponent {
  public sampleForm: FormGroup;

  @ViewChild('emailElm')
  emailElm: ElementRef;

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    const emailValidtors = [
      Validators.required,
      Validators.email
    ]

    const emailFC = new FormControl(null, {
      validators: emailValidtors,
      updateOn: 'blur'
    });
    //
    this.sampleForm = new FormGroup({
      'email': emailFC
    });
    //
    this.initEmailChaingeEvent({
      emailFC: emailFC,
      validtors: emailValidtors
    });
    //
    this.sampleForm.valueChanges.subscribe((val) => {
      console.log('_blue event:valueChanges', val)
    });
    //
    this.initShowErrorMsgEvent({
      fc: emailFC
    });
  }

  private initEmailChaingeEvent(arg: {
    emailFC: FormControl,
    validtors: any[]
  }) {
    fromEvent(this.emailElm.nativeElement, 'input')
      .pipe(debounceTime(500))
      .subscribe((event: Event) => {
        const currentEmail = (event.target as HTMLInputElement).value;
        // check is valid
        // **quention** : how can I get validtors from fromcontrol self 
        // if I use  arg.emailFC.validator(arg.emailFC) to ehcek status , it will trigger oberservable in initShowErrorMsgEvent(),
        //  but I just want to got valid result , I don't want to show error msg on UI at this time

        for (const validator of arg.validtors) {
          const inValid = validator(arg.emailFC);
          if (inValid) {
            console.log('input event:invalid', currentEmail);
            return;
          }
        }
        // **do sometheng when all valid**
        console.log('input event:call API , email:',currentEmail );
      });
  }

  private initShowErrorMsgEvent(arg: {
    fc: FormControl,
  }) {
    arg.fc.statusChanges
      .subscribe((status) => {
        // console.log('status' , status);
        if (status === 'INVALID') {
          // show error msg....
          console.log('_show error msg by antoher component');
        }
      });
  }
}

<form [formGroup]="sampleForm">
  <input formControlName="email" #emailElm >
</form>

Answer 1

谢谢大家给我更多的想法，我通过formControl 的 validator属性修复了它，这是我修改后的列表：

• 仅将值传递给验证器避免触发 statusChange 发射器

活生生的例子

private initEmailChaingeEvent(arg:{
   emailFC : FormControl,
   ....
}) {
  ...
  const inValid = arg.emailFC.validator({
      value: currentEmail
    }
    as any);
  ....
}