Get validation error list of form control in angular 6

user_10176050 0
Viewed 12268

I'm using angular 6 with reactive forms. I want to show validation messages dynamically. And I wrote some code like below. But I take this error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. How can I take list of errors of input?

.html file

<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 file

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

I found the solution. My mistake is, I thought that myForm.controls.studentName.errors is an array. But, it is not array, it's an object. So, below code working perfectly.

.html file

<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 file

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

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

You have to define your errors separately. You cannot use *ngFor here. You can do something like this:

<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>
user_57992870
Related