Question

我正在使用Angular表单验证来实现一个自定义异步验证器，它可以很好地与Promises配合使用，但是..我想避免使用Promise并使用Observable从其有用的方法中受益并使其更简单。

我做了以下事情，但效果很好：

class OrderFormComponent{

    issueSubject: FormControl;

    static checkAsyncValue(val: string){
        return new Observable(observer => {
              setTimeout(() => { //Timeout just to simulate an async call
                  if( val.substr(0,2) != "#SUBJECT_" ) {
                    observer.next(false);
                  } else {
                    observer.next(true);
                  }
                  observer.complete();
              }, 500);
        });
    }


    constructor(fb: FormBuilder){

        this.issueSubject = fb.control('', [Validators.required], []]);
        const issueSubject = this.issueSubject;
        let checkValue = function(value){
            OrderFormComponent.checkAsyncValue(value).subscribe((result) => {
                  if (result !== true) {
                    issueSubject.setErrors({
                      notunique: true
                    });
                  }
            });
        }
        issueSubject.valueChanges.debounceTime(500).distinctUntilChanged().subscribe(value => {
            checkValue(value);
        });
        this.issueSubject.setValue('Test Bad Subject');

        this.issueForm = fb.group({
            subject:   this.issueSubject
        });     
    }

}

但是，我想做的是不要基于“valueChanges”并通过直接在FormControl的async validators数组中添加自定义验证器来简化操作，如下所述：

this.issueSubject = fb.control('', [Validators.required], [
    //Adding here something like OrderFormComponent.checkAsyncValue
]]);

请注意我想继续使用以下内容：

debounceTime(500).distinctUntilChanged()

有没有办法做或者强制要基于valueChanges Observable？

编辑：要添加的内容，我的示例的一个重要缺点是，在执行自定义异步验证时，不会设置表单的“pending”属性

提前谢谢

Angular FormControl异步验证，受益于Observable

0 个答案: