Angular 带有 socket.io 的自定义异步验证器

Question

我有一个项目使用 socket.io 调用服务器获取数据。这部分完全可以工作，但它使用回调函数并且没有可观察的。所以，我的问题是双重的，我不知道从哪里开始。

我正在尝试制作一个自定义异步验证器，我已经看到它是用 Obervables 完成的，所以我认为第一组是将我的套接字调用转换为一个可观察的。

Validator.ts

export class MyValidators {

 static rules(socket: WebSocketService) {
    return (control: AbstractControl): Observable<ValidationErrors | null> => {
      const val: string = control.value;

      const pwdRules: Observable<RuleInterface> = new Observable(observer => {
        socket.getParms((resp: SocketResponse<RuleInterface[]>) => {
          observer.next(resp.records[0]);
        });
      });

      return pwdRules.pipe(
        map(rule => val.length < rule.max_len ? null : {tooBig: true} )
      )
  }
}

所以我将套接字调用转换为 Observable，他们使用管道和映射到 return 空对象或错误对象。

我的组件 FormGroup 如下所示：

constructor(
    private fb: FormBuilder,
    private socket: WebSocketService
  ) { }
....

ngOnInit {
this.reset2Form = this.fb.group({
      val1: ['', [Validators.required, MyValidators .rules(this.socket)]],
      val2: ['', [Validators.required]]
    });

}

当我打印出 val1 错误时，我得到了这个。

{ 
   "_isScalar": false, 
    "source": { "_isScalar": false }, "operator": {} 
}

我可以从控制台看到套接字调用从未被调用过。

我的问题是我做错了什么？这是我设置可观察对象的方式吗？或者我如何使用管道？

Answer 1

FormBuilder.group 方法签名如下所示：

group(controlsConfig: { [key: string]: any; }, options: AbstractControlOptions | { [key: string]: any; } = null): FormGroup

所以 options 是 AbstractControlOptions 定义为：

FormGroup 的配置选项对象。对象可以有两种形状：

1) AbstractControlOptions object (preferred), which consists of:

validators: A synchronous validator function, or an array of validator functions

asyncValidators: A single async validator or array of async validator functions

updateOn: The event upon which the control should be updated (options: 'change' | 'blur' | submit')

所以

ngOnInit {
    this.reset2Form = this.fb.group({
        val1: ['', [Validators.required, MyValidators.rules(this.socket)]],
        val2: ['', [Validators.required]]
    });
}

你应该写：

ngOnInit {
    this.reset2Form = this.fb.group({
        val1: ['', [Validators.required], [MyValidators.rules(this.socket)]],
        val2: ['', [Validators.required]]
    });
}

Angular 带有 socket.io 的自定义异步验证器

Angular custom async validator with socket.io

validation

observable

typescript

angular

angular-observable