错误处理服务器端 (.NET Core 5.0) 通过线路向客户端呈现错误消息 (Angular 11)

Question

我在后端使用 .NET Core 5.0 构建了一个联系表单，在客户端使用 angular 11，它允许用户填写一个表单，从中收集数据并将其发送到静态电子邮件地址。

我遇到的问题是处理从服务器端到客户端的错误。在服务器端，我的模型属性使用属性或装饰器进行验证（Required、StringLength 等）。我希望所有服务器端错误都在客户端呈现，例如，当提交一个空表单时。

HTML

<span class="cross-validation-error-message alert alert-danger" 
*ngIf="!contactForm.valid && !hide && contactForm.errors?.value !== ''">{{errorMessage}} 
</span>

TypeScript：顶部是相关属性，下面是 api 调用。

 active = false;
 submitted = false;
 hide = true;
 errorMessage!: string;

 private postMessage(message: ContactModel) {
 this.appService.postMessage(message)
 .subscribe(
 () => {
 if (this.errorMessage == null) {
 this.hide = true;
 this.submitted = true;
 this.active = false;

 }
 },

 (error) => {
 console.log(error);
 this.hide = false;
 this.errorMessage = this.contactForm.errors?.value;
 return this.errorMessage.valueOf;
           
 }
 );
 }

Answer 1

首先，我建议您使用 angular 验证器禁用提交按钮，以避免空表单的网络传输。当然没有判断力。那么我不确定是否理解您的所有代码，contactForm.errors 关注您的 angular 表单，因此对您的服务器端不可知，所以为什么要影响它 this.errorMessage ？你不想显示像 :

这样的错误吗？

this.errorMessage = error; //maybe you have to display each property of error object

this.errorMessage = error.prop1 + ' ' + error.prop2 ...

错误处理服务器端 (.NET Core 5.0) 通过线路向客户端呈现错误消息 (Angular 11)

Error Handling Server-Side (.NET Core 5.0) Render Error Message Over the Wire to Client (Angular 11)

server-side-validation

single-page-application

asp.net-core

angular