Question

我正在使用具有反应形式的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)]
});

Answer 1

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>

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);
}

获取Angular 6中表单控件的验证错误列表

2 个答案: