Question

我试图在Angular FormControl上显示所有错误，但是我无法使用ngFor循环遍历errors对象，因为它不是数组

<ion-item>
    <ion-label>{{property.label}}
        <div class="error-message">
            <ul>
                <li *ngFor="let err of surveyForm.controls[property.label].errors">
                    {{ err}}
                </li>
            </ul>
        </div>
    </ion-label>
    <ion-input [formControlName]="property.label">
    </ion-input>
 </ion-item>

＆＃34;错误：无法找到不同的支持对象＆＃39; [object Object]＆＃39;类型＆＃39;对象＆＃39;。 NgFor仅支持绑定到Iterables，例如Arrays＆＃34;

如何遍历像errors这样的对象？

Answer 1

您可以创建一个Pipe，用于在对象键数组中转换对象

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'objToKeys'
})
export class ObjToKeysPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    if (!value) {
      return value;
    }
    return Object.keys(value);
  }
}

并像这样使用这个管道：

<ion-item>
    <ion-label>{{property.label}}
        <div class="error-message">
            <ul>
                <li *ngFor="let key of surveyForm.controls[property.label].errors | objToKeys">
                    {{ surveyForm.controls[property.label].errors[key] }}
                </li>
            </ul>
        </div>
    </ion-label>
    <ion-input [formControlName]="property.label">
    </ion-input>
 </ion-item>

在模板中迭代FormControl错误

1 个答案: