Angular 响应式表单控件错误：如何读取错误对象

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 表单不提供验证 messages/values。它们是非常简单的对象，仅显示附加到 FormControl 的每个 Validator 的名称，<input> 不满足其要求。

所以当minLength错误存在时，这意味着验证器返回无效，否则你根本不会在错误对象中看到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 returns undefined 是因为 error 对象是一个看起来像这样的类型：{ [key: string]: any; }即它是一个 indexable type。属性访问器失败，因为它确实没有名为 minLength.

的属性

Angular 响应式表单控件错误：如何读取错误对象

Angular Reactive Form Control Errors: how to read the error object

typescript

angular-reactive-forms