CODEWITHSUNDEEP
javascripthtmlangulartypescriptvalidation
PaulDickson
PaulDickson

Reputation: 69

How to call backend error message on the frontend?

I have a problem to return error messages from the backend to the frontend in my Angular project. The goal is to show the error message whenever the value msisdn is not eligible to be renewed. Right now, whenever the value is inserted, the error message "MSISDN is not eligible for renewal" is hardcoded, which is too general assuming as long as it is 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>

Upvotes: 0

Views: 1015

Answers (1)

Wajid
Wajid

Reputation: 593

You need to set error message in backend when you get response from api then append that message with your frontend

Like for example you set response like below

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

if got error then you need to set like below if you want to send data or not its upto you!

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

Now on Frontend

let suppose you got error

then you need simple response.message

now what ever message it will show in frontend dynamically

Upvotes: 2

Related Questions