獲取Angular 6中表單控件的驗證錯誤列表

Question

我正在使用帶有反應形式的角度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

您必須分別定義錯誤。 您不能在此處使用* ngFor。 您可以執行以下操作：

<div *ngIf="myForm.get('studentName').invalid && (myForm.get('studentName').dirty || myForm.get('studentName').touched)">


    <div *ngIf="myForm.get('studentName').hasError('required')">
      You entered not valid input.
    </div>

    <div *ngIf="myForm.get('studentName').hasError('minlength')">
      Name must be at least 3 characters long.
    </div>

</div>

Answer 2

我找到了解決方案。 我的錯誤是，我認為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);
}