时间戳

首页 > 解决方案 > 带有 socket.io 的 Angular 自定义异步验证器

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

问题描述

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

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

验证器.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": {} 
}

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

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

标签： angulartypescriptvalidationobservableangular-observable

解决方案

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

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

所以options定义AbstractControlOptions为：

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

1) AbstractControlOptions 对象（首选），它包括：

validators : 一个同步验证器函数，或一个验证器函数数组

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

updateOn：应该更新控件的事件（选项：'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]]
    });
}

推荐阅读