我正在使用具有反应形式的6号角。我想动态显示验证消息。我写了一些下面的代码。但是我遇到了这个错误:找不到类型为'object'的其他支持对象'[object Object]'。 NgFor仅支持绑定到可迭代对象,例如数组。如何获取输入错误列表?
.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)]
});
答案 0 :(得分:0)
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>
答案 1 :(得分:0)
我找到了解决方案。我的错误是,我认为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);
}