一般：Angular2 中的异步验证

从几个晚上开始，我就开始在 augular2 中进行表单验证。

所有基本案例都很容易实现并且工作正常，但我坚持使用异步验证。我创建了一个非常小的例子http://plnkr.co/edit/Xo8xwJjhlHkXrunzS8ZE http://plnkr.co/edit/Xo8xwJjhlHkXrunzS8ZE但它不起作用。

根据 model_spec.ts 的测试，“状态更新为挂起后应该触发一个事件”，通过创建控制组进行注册，假设可以以某种方式工作

builder.group({login: ["",Validators.required,validationFuctionWhichReturnsPromise]

我花了整整一个晚上才发现这段代码已经在 alfa-46 中发布了（我使用了 alfa-45），并且在更新依赖项后，异步验证开始工作。该功能非常新鲜，尚未完整记录，但

（对于那些还没有尝试过的人）基本上，异步验证器是一个具有 Control 参数并返回验证结果的承诺的函数。注册验证器有两种方法。 1) 我在示例中使用的那个，2) 作为通过 NG_ASYNC_VALIDATORS 提供验证器的指令（请参阅 UniqLoginValidator 和 NgFormControl 了解它是如何工作的）。您可以编写多个验证器（尚未测试，但执行此操作的函数在代码中，请参阅https://github.com/angular/angular/commit/cf449dd https://github.com/angular/angular/commit/cf449dd).

但当我最终启动并运行验证器时，一个新问题出现了。异步验证器非常适合在服务器端验证中使用。但是每次 keyup 之后 model.fe 的每次更改都会调用验证。因此，如果我们在每次按键后向服务器发送请求，这不会是太有效的方式;)我检查了它是如何在角度1中完成的，它们有可能消除验证事件。

我的问题是：

1. 如何使用异步验证器实现节流或反跳？我看到了一些想法，但没有一个很好（主要是因为它们需要更改角度代码本身）。有没有有效的方法可以做到这一点，而无需等待新的角度发布？

我正在考虑使用 debounce （来自 underscorejs）来扭曲验证器函数，但它不会工作，因为 Angular 期望每次都能得到有效的承诺。

我的第二个想法是，如果所有事件在幕后都使用 RxJs，那么也许我可以在负责验证的事件流上应用去抖动。在 model.ts 中，从验证器返回的 Promise 更改为可观察的，并添加了新的订阅。我们无法访问 obs(Observable) 来在那里应用去抖。

2. 有什么方法或 ID 可以更改，轻松扩展对表单验证的控制吗？

我发现了一个密切相关的问题如何在 angular2 中触发表单验证器 https://stackoverflow.com/questions/32260082/how-to-trigger-form-validators-in-angular2

PS 还有其他与异步验证器相关的问题，但仍处于开放状态https://github.com/angular/angular/issues/1068 https://github.com/angular/angular/issues/1068

这是一个帮助器类，您可以使用它来消除所有异步验证器的反跳：

import {Component} from 'angular2/core';
import {Observable} from 'rxjs/Observable';
import {Observer} from 'rxjs/Observer';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import {Control} from 'angular2/common';

export class AsyncValidator {
_validate;

constructor(validator: (control: Control) => any, debounceTime = 1000) {
    let source: any = new Observable((observer: Observer<Control>) => {
        this._validate = (control) => observer.next(control);
    });

    source.debounceTime(debounceTime)
        .distinctUntilChanged(null, (x) => x.control.value)
        .map(x => { return { promise: validator(x.control), resolver: x.promiseResolver }; })
        .subscribe(
            (x) => x.promise.then(resultValue => x.resolver(resultValue),
            (e) => { console.log('async validator error: %s', e); }));
}

private _getValidator() {
    return (control) => {
        let promiseResolver;
        let p = new Promise((resolve) => {
            promiseResolver = resolve;
        });
        this._validate({ control: control, promiseResolver: promiseResolver });
        return p;
    };
}

static debounce(validator: (control: Control) => any, debounceTime = 400) {
    var asyncValidator = new this(validator, debounceTime);
    return asyncValidator._getValidator();
}
}

然后，在使用异步验证器时，您所要做的就是用此调用包装您的验证器，并像平常一样编写验证器：

AsyncValidator.debounce(control => this.asyncValidator(control));

这是一个示例用法：

export class AppComponent {
form: ControlGroup;

constructor(private _formBuilder: FormBuilder) {
    var validator = AsyncValidator.debounce(control => this.asyncValidator(control));

    this.form = _formBuilder.group({
        name: ['', Validators.required, validator],
    });
}

asyncValidator(control): any {
    let p = new Promise(resolve => {
        // get from server information need to validate control

        if (control.value === 'valid value') {
            resolve(null);
        } else {

            resolve({
                asyncValidator: {
                    valid: false
                }
            });
        }
    });
    return p;
}
}