角反应形式控制错误：如何读取错误对象

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 Forms不提供验证消息/值。它们是非常简单的对象，它们仅显示附加到Validator的{​​{1}}的每个FormControl的名称。

因此，当存在<input>错误时，这意味着验证程序返回的是无效的，否则您将在错误对象中根本看不到minLength。

在您的示例中，您向minLength元素提供了<input>中的formControlName。您应该可以通过方法中的field.name errors属性访问错误，例如：

FormControl's

或者通过在if(errors['required']) { // The required validator returned invalid } 上使用hasError方法，如下所示：

FormControl

请注意，if(this.form.get(field.name).hasError('required')) { // The required validator returned invalid } 返回errors.minLength的原因是因为undefined对象的类型类似于：error，即它是{{ 3}}。属性访问器失败，因为它实际上没有名为{ [key: string]: any; }的属性。