具有socket.io的Angular Custom async验证器

Question

我有一个使用socket.io的项目来调用服务器以获取数据。该部分可以完全工作，但是它使用了回调功能，并且无法观察到。因此，我的问题是双重的，我不知道从哪里开始。

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

验证器

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

因此，我将套接字调用转换为可观察的，他们使用管道和映射返回零或错误对象。

我的组件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(AbstractControptions对象(首选(，该对象由：

组成

验证器：同步验证器函数或验证器数组 功能

asyncvalidators ：单个async验证器或async的数组 验证器功能

UpdateOn：控件应在内的事件 要更新(选项：'change'|'blur'|提交'(

所以而不是

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