时间戳

首页 > 解决方案 > 如何在前端调用后端错误消息？

javascript - 如何在前端调用后端错误消息？

问题描述

我在 Angular 项目中将错误消息从后端返回到前端时遇到问题。目标是在值 msisdn 不符合续订条件时显示错误消息。现在，每当插入该值时，错误消息“MSISDN 不符合续订条件”都是硬编码的，假设它是 isEligible = false 就太笼统了。

initForm(): void {
  this.renewForm = this.fb.group({
    deductAmt: [],
    planType: [],
    msisdn: [
      '', {
        validators: [
          Validators.required,
          Validators.pattern(AppConstant.PHONE_REGEX)
        ],
        asyncValidators: [],
        updateOn: 'blur'
      }
    ],
    expiryDate: [],
  });
}

onBack(): void {
  this.router.navigate([RouteConstant.POSTLOGIN, RouteConstant.DASHBOARD]);
}

proceed(): void {
  validateFormFields(this.renewForm);
  if (this.renewFormValid) {
    return;
  }
  this.renewPlan();
}
<input matInput placeholder="Enter MSISDN" [formControl]="msisdn" required/>
<mat-error *ngIf="msisdn.dirty && msisdn.hasError('required')">This field is required.</mat-error>
<mat-error *ngIf="msisdn.dirty && msisdn.hasError('pattern')">MSISDN not valid.</mat-error>

iv class="row" *ngIf="!isBar">
<div class="col-lg-12">
   <label class="text-danger">
      <span>MSISDN is not eligible for renewal.</span>
   </label>
</div>

标签： javascripthtmlangulartypescriptvalidation

解决方案

当您从 api 获得响应时，您需要在后端设置错误消息，然后将该消息附加到您的前端

例如，您设置如下响应

let respons={
data:resData,
message:"Some message for success"
}

如果出现错误，那么如果您想发送数据或不发送数据，您需要进行如下设置！

let respons={
    data:resData,
    message:"MSISDN is not eligible for renewal."
    }

现在在前端

假设你有错误

那么你需要简单的response.message

现在它会在前端动态显示什么消息

推荐阅读