Angular 2 从自定义验证器中检索错误消息答案

【问题标题】：Angular 2 retrieve error message from custom validatorAngular 2 从自定义验证器中检索错误消息
【发布时间】：2017-07-21 15:53:24
【问题描述】：

我在 Angular 2 中编写了一个自定义验证器

function validateSomething(): ValidatorFn {
  return (control: Abstractcontrol): { [key: string]: any } => {
    return {'validateSomething': 'Validation failed because'};
  }
}

非常简单的验证器。现在在 html 中，我根据验证器的输出显示一个对话框。我想要的是能够显示来自验证器的错误（'验证失败，因为'）。我看到的大多数教程都在 html 中使用 hasError('validateSomething') ，然后对错误进行硬编码，如下所示：

<div class="ui pointing orange basic label" *ngIf="form.controls['workDate'].hasError('validateSomething')">
    Here I want to display the message from the validator 
</div>

有没有办法让我从验证器那里得到错误消息？

【问题讨论】：

中的通知我将消息硬编码给用户。我想要的是从验证器中检索消息“验证失败，因为”

标签： validation angular

【解决方案1】：

使用AbstractControl#getError():

<div 
  class="ui pointing orange basic label"
  *ngIf="form.getError('validateSomething', 'workDate') as error>
  {{ error }}
</div>

DEMO

【讨论】：

或者更干净的form.controls.workDate.errors.validateSomething

【解决方案2】：

假设您有自定义验证指令 (appValidateSomething)，它执行一些验证逻辑。 “验证”方法如下所示：

validate(c: AbstractControl): { [key: string]: any; } {
    const v = c.value;
    if (isValid(v)) {
        return null;
    } else {
        // Return error object.
        return {
            'invalidValue': v
        }
    };
}

在 HTML 代码中，您可以编写以下代码：

<input [(ngModel)]="model" type="text" #obj1="ngModel" appValidateSomething/>
<div *ngIf="obj1.errors && (obj1.dirty || obj1.touched)">
    <div [hidden]="!obj1.errors.invalidValue">Wrong value.</div>
</div>

重要的是 'invalidValue' 从验证函数返回的错误对象与错误对象 '.errors.invalidValue' 匹配。

【讨论】：

obj 的由来是什么？是表单控件吗？