Question

我正在创建一个简单的自定义验证器。它应该再次测试在输入字段中输入的名称是否唯一，这是Stroe中的名称列表。

我正在尝试这样做，我检查Store中的Names数组是否为空，我尝试将服务从数据库加载到Store中，这将返回一个Observable。然后商店还会返回一个Observable。

我不知道如何实现这样的验证器。

我组件的代码看起来很像

  @select( s => s.names.loaded ) namesLoaded$: Observable<any>
  @select( s => s.names.data ) names$: Observable<any>

ngOnInit() {
    this.form = this.formBuilder.group({
      ...
      ...
      name: ['', null, [ NameValidator.NameNotTaken( names$) ] ] ,
      street: ['', Validators.required ],
      postal_code: ['', Validators.required],
      city: ['', Validators.required],
      ...
      ...
    }

    // Subscribe the templates store.
    this.namesLoaded$.subscribe( namesLoaded => {
      if( !namesLoaded ) {
        this.service.loadNames()
      }
    })
}

验证器就像

export class NameValidator {

    static NameNotTaken( names: Observable ) {

        return (control: AbstractControl) => {
          return names.subscribe( response => {
            let filtered = response.filter( name=> name === control.value )
if( filtered.length > 0 ) control.setErrors({nameTaken: true})
          })
        }
       return null
    }

}

带有NgRedux的角度自定义验证器

0 个答案: