Angular 7-如何使用模板驱动从对象读取服务端验证？

要在Angular的Template Driven Form中显示服务端返回的验证错误信息，你可以通过以下步骤实现：

1. 创建一个错误消息模型：首先，为错误消息创建一个模型类，以便于在Angular应用中处理这些错误。

export class ErrorMessage {
  code: string;
  field: string;
  message: string;
  resource: string;
}

1. 存储服务端错误：在你的服务组件中，当从Spring Boot服务接收到错误时，将其转换为ErrorMessage[]类型并存储起来。例如：

// 假设你已经从API调用中获取了错误并保存在变量apiErrors里
this.errorMessages = apiErrors.map(error => ({
  code: error.code,
  field: error.field,
  message: error.message,
  resource: error.resource
}));

1. 将错误信息传递给表单组件：如果你的服务和表单组件是分开的，确保通过@Input()装饰器将错误信息传递给表单组件。

2. 在模板中显示错误信息：在每个需要显示错误信息的表单项附近，使用*ngIf指令来检查特定字段是否有错误，并显示相应的错误消息。

<!-- 对于studentName字段 -->
<input type="text" name="studentName" ngModel #studentName="ngModel">
<div *ngIf="getError(studentName, 'studentName') as errorMsg">
  {{ errorMsg.message }}
</div>

<!-- 对于studentDesc字段，同理 -->

1. 在组件类中定义getError方法：这个方法会根据字段名查找对应的错误消息。

getError(control: NgModel, fieldName: string): ErrorMessage | null {
  const error = this.errorMessages.find(err => err.field === fieldName);
  if (control.invalid && control.errors) {
    // 如果有客户端验证错误，优先显示客户端错误
    return { message: this.getValidationMessage(control) };
  } else if (error) {
    // 否则显示服务端错误
    return error;
  }
  return null;
}

getValidationMessage(control: NgModel): string {
  for (const key in control.errors) {
    if (control.errors.hasOwnProperty(key)) {
      switch (key) {
        case 'required':
          return 'This field is required';
        case 'email':
          return 'Invalid email format';
        // 其他客户端验证错误处理...
        default:
          return '';
      }
    }
  }
  return '';
}

这样，每当服务端返回错误信息时，你就可以在前端表单上动态地显示这些错误消息了。记得根据实际情况调整上述代码中的逻辑和错误处理方式。