我做了什么。

Question

直接提问

我可以通过某种方式判断某个控件上是否正在进行异步验证？

详细问题

在Angular中使用表单时，您会发现，取决于某些控件的状态，它将具有或不具有某些ng- *类。

例如，如果控件正在验证电子邮件地址，并且该地址与某些正则表达式不匹配，则将ng-invalid类添加到控件中。

现在，您可以执行Async Validation，但是在进行验证时，控件中没有错误，因此，您不能编写如下代码：

<button [class.disabled]="email.errors">

如果您如上所述编写代码，则该按钮将被启用，直到异步验证器响应某些错误为止。如果没有错误，那是很高兴的情况，但是如果发现一些错误，则行为是该按钮将在一段时间内启用，这不是我想要的！

Answer 1

我可以通过某种方式判断某个控件上是否正在进行异步验证？

是的，根据Angular docs所述，具有异步验证的模型可以处于待处理状态：

开始异步验证后，表单控件进入挂起状态。您可以检查控件的待处理属性，并使用它提供有关正在进行的验证的视觉反馈。

因此，您可以更改类.ng-pending以对所有挂起的元素应用某种特殊样式，或者可以访问属性model.pending以具有全部功能。例如：

<button [class.disabled]="model.pending">

Answer 2

好吧，感谢@Brandom，我为我的用例提出了一个解决方案。

在我写这篇文章的那一刻，我不知道此类已经存在

作为旁注：我宁愿如果表单控件由于异步验证器而处于验证状态，它会公开ng类，例如 ng-validating 。

我做了什么。

我在父组件中添加了一个名为 validating 的属性，以及两个方法 validationStarted 和 validationEnded 。

@Component{/* Some options here */}
export class MyComponent{
    // ...
    validating: bool = false;
    public validationStarted() {validating = true;}
    public validationEnded() {validating = false;}
}

在自定义验证器（作为指令实现）中，我还添加了两个输出属性： startingValidation 和 finishingValidation 。所以我的自定义验证器看起来像这样：

@Directive{ /*Some options here*/ }
export class DirectiveName {

    @Output startingValidation: EventEmitter;
    @Output finishingValidation: EventEmitter;

    // Async validator must return a Promise or an Observer
    validate (control: AbstractControl): Promise<ValidationErrors|null> | Observer<ValidationErrors|null>
    {
        self.startingValidation.emit()
        return new Observer(observer => {
            next => {},
            error => {},
            complete => {
                self.finishingValidation.emit();                
            }
        });
    }
}

正在验证的控件：

<input (startingValidation)="validationStarted()"  (finishingValidation)="validationEnded()">

现在我可以：

<button [class.disabled]="validating">

我希望这对那些使用类似用例的人有所帮助。

更新

正如@Cristian_Traìna指出的，确实存在一个类： ng-pending 。并于2016年被要求：https://github.com/angular/angular/issues/10336

表示正在进行异步验证的类

2 个答案:

我做了什么。

更新