CODEWITHSUNDEEP
htmlangulardata-binding
classname13
classname13

Reputation: 123

Angular Variable undefined result

I've been trying to solve this my self but i think i need help. It's been hours of searching for a solution but i can't seem to solve this myself. I'm learning asp.net core 2.2 web api. And i'm following a tutorial i found on youtube

The webapi works using PostMan. I was able to save in the database

But the problem is when i call it in the Angular.

And i think the problem is not the way i call this. But the binding of the input text data.

Here is the html code

<div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text bg-white">
            <i class="far fa-credit-card" [class.green.icon]="CardNumber.valid" [class.red.icon]="CardNumber.invalid && CardNumber.touched"></i>
          </div>
          <input maxlength="16" minlength="16" required name="16 Digit CardNumber" #CardNumber="ngModel" [(ngModel)]="service.formData.CardNumber" class="form-control" placeholder="Card Number">
        </div>

      </div>

I have other input text which is working fine and in my eyes they are the same. SO i don't know the reason why. In my web api. All of the data is required to i'm receiving 400 (Bad Request) error.

I use the console.log to view the input data in the browser. But when it comes to CardNumber it becomes undefined so i'm expecting this to be the problem.

But the other input text is fine.

This is my model

export class PaymentDetail {
    PMId: number;
    CardOwnerName: string;
    CardNumber: string;
    ExpirationDate: string;
    CVV: string;
}

And this is the method that is called by the submit button where i'm receiving undefined

postPaymentDetail(formData: PaymentDetail) {
    console.log(formData.CardOwnerName);
    console.log(formData.CVV);
    console.log(formData.ExpirationDate);
    console.log(formData.CardNumber);
    console.log(formData.PMId);
    return this.http.post(this.rootUrl + '/PaymentDetail', formData);
  }

Update: This is the result of the Network Tab Header

The data i typed in the input text is there.

enter image description here

And this is the result of the Network tab Preview

enter image description here

I checked the c# code. And i add a breakpoint in the code. The breakpoint is not working using Angular. But works using postman. I mean the code is called. Am i doing the breakpoint wrong?

Upvotes: 0

Views: 1637

Answers (2)

Nagender Pratap Chauhan
Nagender Pratap Chauhan

Reputation: 2204

Create a constructor of PaymentDetail class and define variable default value is blank.

Like : - 

export class PaymentDetail {
    PMId: number;
    CardOwnerName: string;
    CardNumber: string;
    ExpirationDate: string;
    CVV: string;

   constructor () {
    this.PMId = 0;
    this.CardOwnerName = "";
    this.CardNumber = "";
    this.ExpirationDate = "";
    this.CVV = "";
   }

}

Upvotes: 0

Ganesh
Ganesh

Reputation: 6016

you don't need to send any data to postPaymentDetail() method, because you are already binding it with ngModel.

do some changes like below your component,

formData = new PaymentDetail();

postPaymentDetail() {
  console.log(this.formData.CardNumber);
  return this.http.post(this.rootUrl + '/PaymentDetail', this.formData);
}

I hope this will solve your issue :)

Upvotes: 1

Related Questions