时间戳

首页 > 解决方案 > 获取角度6中表单控件的验证错误列表

angular - 获取角度6中表单控件的验证错误列表

问题描述

我正在使用带有反应形式的 Angular 6。我想动态显示验证消息。我写了一些如下代码。但我接受了这个错误：找不到类型为“object”的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables，例如 Arrays。如何获取输入错误列表？

.html 文件

<form [formGroup]="myForm" (ngSubmit)="save()">
    <input type="text" formControlName="studentName">

    <div *ngFor="let err of myForm.controls.studentName.errors">
      <div>You entered not valid input</div>
    </div>
</form>

.ts 文件

this.myForm = this.formBuilder.group({
  studentName: ['', Validators.required, Validators.minLength(3)]
});

标签： angulartypescriptangular6

解决方案

我找到了解决方案。我的错误是，我认为那myForm.controls.studentName.errors是一个数组。但是，它不是数组，它是一个对象。所以，下面的代码工作得很好。

.html 文件

<form [formGroup]="myForm" (ngSubmit)="save()">
    <input type="text" formControlName="studentName">

    <div *ngFor="let err of getErrorList(myForm.controls.studentName.errors)">
      <div>You entered not valid input</div>
    </div>
</form>

.ts 文件

this.myForm = this.formBuilder.group({
  studentName: ['', Validators.required, Validators.minLength(3)]
});

getErrorList(errorObject) {
  return Object.keys(errorObject);
}

推荐阅读