[英]Get validation error list of form control in angular 6
我正在使用带有反应形式的角度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)]
});
您必须分别定义错误。 您不能在此处使用* 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>
我找到了解决方案。 我的错误是,我认为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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.