Question

我有一个带有用于bankAccount输入字段的表单。

字段：bankAccount.currency
栏位：bankAccount.bank
字段：名称

bankAccount {
    currency?: string;
    bank?: string;
}

我想向用户显示错误

<div *ngFor="let error of errors">
  {{ error }}
</div>

这会给我名称错误，但是当bankAccount.currency字段错误时，我得到bank account: 0 [object Object]。

如何获取[object Object]的内容？

Answer 1

使用json管道对对象的值进行字符串化：

<div *ngFor="let error of errors">
  {{ error | json }}
</div>

这样，您将能够确定error数组中errors对象的结构。

然后，您想使用error对象中的属性显示适当的错误消息。

Answer 2

为回答您的问题，Angular提供了一个ValidationErrors界面：

/**
 * An object containing any errors generated by failing validation,
 * or null if there are no errors.
 */
readonly errors: ValidationErrors | null;

比方说，您在表单控件上添加了required验证程序，验证失败，只需检查errors.required的出现。如果该属性存在，则验证失败，您可以向客户端显示反馈。

更完整的解决方案是跟踪验证消息列表：

export const ValidationMessages = {
  required: 'Field is required',
  ...
}

然后创建一个辅助方法以显示（第一条）验证消息：

showError(errors: ValidationErrors): string | null {
  const key = Object.keys(errors)[0];

  return ValidationMessages[key] || 'Field is invalid';
}

...并在您的模板中使用它：showError(errors)

提示：使用json pipe将对象转换为JSON格式（即{{ errors | json}}。

Answer 3

尝试将对象解析为输出字符串。

JSON.stringify(error)

Answer 4

您可以仅访问要显示的属性：

<div *ngFor="let error of errors">
  Currency: {{ error.currency }}, Bank: {{ error.bank }}
</div>

当表单属性是对象时，如何显示错误？

4 个答案: