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)]
});
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);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With