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

Question

我正在使用具有反应形式的 angular 6。我想动态显示验证消息。我写了一些如下所示的代码。但我接受了这个错误：找不到类型为“对象”的不同支持对象“[对象对象]”。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)]
});

Answer 1

我找到了解决方案。我的错误是，我认为那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);
}