Angular Reactive Form Control Errors：如何读取错误对象

Question

我有许多自定义验证器，它们将应用于 Angular 7 中动态生成的响应式表单中的字段。

模板如下所示：

<ng-container class="table-wrapper" *ngIf="!field.hide && field.display === fieldTypes.get('Text')">
  <label>
    <span class="form-label">{{field.label}}</span>
    <span *ngIf="dynForm.controls[field.name].invalid
    && ( dynForm.controls[field.name].dirty || dynForm.controls[field.name].touched )">
      {{errorMessageResolver(field, dynForm.controls[field.name].errors)}}
    </span>
  </label>
  <input type="text" name="{{field.name}}" value="{{field.val}}" formControlName="{{field.name}}"/>
</ng-container>

如您所见，我有一个函数可以从表单中提取生成的 ValidationError 并将其提供给以下函数：

  errorMessageResolver(field: Field, errors: ValidationErrors) {
    console.log('valids=' + field.validations.length);
    console.log(errors);
    console.log(errors as ValidationErrors);
    console.log(errors.hasOwnProperty('required'));
    console.log(errors.hasOwnProperty('minLength'));
    console.log(errors.minLength);
    console.log(errors.hasOwnProperty('maxLength'));
  }

大量控制台日志记录的结​​果是：

我希望你能看到，minLength ValidationError 肯定会被拾起，因为你可以看到控制台输出：

{ minLength: {...}}

但以下尝试的控制台应该显示似乎没有办法获取实际值。那么如何获取密钥及其值呢？

Answer 1

不幸的是，Angular 表单不提供验证消息/值。它们是非常简单的对象，仅显示附加到 FormControl 的每个 Validator 的名称，<input> 不满足其要求。

所以当minLength错误存在时，说明验证器返回无效，否则你根本不会在errors对象中看到minLength。

在您的示例中，您为 <input> 元素提供了 formControlName 或 field.name。您应该能够通过您的方法中的 FormControl's errors 属性访问错误，例如：

if(errors['required']) {
    // The required validator returned invalid
}

或者通过在FormControl 上使用hasError 方法，如下所示：

if(this.form.get(field.name).hasError('required')) {
    // The required validator returned invalid
}

只是为了让您知道，errors.minLength 返回undefined 的原因是因为error 对象是一个看起来像这样的类型：{ [key: string]: any; }，即它是一个indexable type。属性访问器失败，因为它确实没有名为 minLength 的属性。