Angular Variable undefined result

Question

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.

And this is the result of the Network tab Preview

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?

Put a break point in the postPaymentDetail method. What is the value of formdata? Is this a type that can be converted to json? Now move on to the network tab in the browser debugging tools, what is actually being sent? Now move on to the .net code, how is the incoming data being bound? — Igor
– Igor, Commented Mar 11, 2019 at 13:12
You need a formGroup I guess because You can only get the value with ngModel, what do You send in postPaymentDetail() ? — PierreD
– PierreD, Commented Mar 11, 2019 at 13:13
@Igor i updated the question and added a screenshot. Msu Arven - i have a formGroup This is the the code <form #form="ngForm" autocomplete="off" (submit)="onSubmit(form)"> — classname13
– classname13, Commented Mar 11, 2019 at 13:31

Ganesh · Accepted Answer · 2019-03-11 13:20:23Z

1

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 :)

edited Mar 11, 2019 at 13:20

answered Mar 11, 2019 at 13:14

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

classname13 Over a year ago

This solved my problem. But why does simply adding 'this' solved the problem? can you please elaborate the answer. Thank you

Ganesh Over a year ago

you are using formal parameter in the console which doesn't have the value in it, but with this keyword we are using the service class variable which is actually the binding variable.

Ganesh · Accepted Answer · 2019-03-11 13:46:36Z

0

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 = "";
   }

}

edited Mar 11, 2019 at 13:46

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

answered Mar 11, 2019 at 13:19

Nagender Pratap Chauhan

2,23417 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular Variable undefined result

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related