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，它们使用管道和映射返回null或错误对象。

我的组件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对象（首选），该对象包括：

验证程序：同步验证程序功能或验证程序数组功能

asyncValidators ：单个异步验证器或异步数组验证器功能

updateOn：控件应在其上发生的事件进行更新（选项：“更改” |“模糊” |提交”）

所以不是

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

带socket.io的角度自定义异步验证器

1 个答案: