Angular Post with Form Data append but server says expected data is empty, I couldn't find it's reason

Question

In the below there is Angular codes to post form data to a customer company's url. Company will return a result to the url which I gave it to the company inside of a form data at the time of posting (as a successurl or errorurl). But company says data is empty. But when I search payload in network tab of google chrome, it seems data is full. Also I know formData object is not empty I print it's value in console.

What do you suggest or what should I do?

Angular version is 11.0.4

Here is my code:

ngAfterViewInit() {

    this.pay();
  }

  pay() {

    var formData = new FormData();

    formData.append('mode', this.mode);
    formData.append('apiversion', this.apiVersion);
    formData.append('terminalprovuserid', this.terminalProvUserID);
    formData.append('terminaluserid', this.terminalUserID);
    formData.append('terminalmerchantid', this.terminalMerchantID);
    formData.append('txntype', this.txnType);
    formData.append('txnamount', this.txnAmount);
    formData.append('txncurrencycode', this.currencyCode);
    formData.append('txninstallmentcount', this.installmentCount);
    formData.append('customeremailaddress', this.customerEmailAddress);
    formData.append('customeripaddress', this.customerIpAddress);
    formData.append('orderid', this.orderId);
    formData.append('terminalid', this.terminalID);
    formData.append('successurl', this.successUrl);
    formData.append('errorurl', this.errorUrl);

    console.log('success url :', formData.get("successurl")); // it is OK!I can see in console..

    this.http.post("https://company.com/servlet/engine", formData, {observe: 'body', responseType: 'text' }).subscribe(
      (response) => console.log('if succes: ', response),
      (error) => console.log('if error: ', error)
    )

  }

Also why key pairs in payload have "------WebKitFormBoundaryit2Kfp5QO66ynMZE" in beginning of every value

chrome dev tool payload data

chrome dev tool payload data with boundry

chrome dev request

Also I give string key pair like {'key1':'value', 'key2':'value'} to the post method instead of form data

Also try to give header "application/x-www-form-urlencoded" or "multipart/form-data" like below but still same..

this.http.post("https://company.com/servlet/engine", formData, {headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, observe: 'body', responseType: 'text' }).subscribe(
  (response) => console.log('if succes: ', response),
  (error) => console.log('if error: ', error)
)

Any advice, example would be grateful. Thanks.

UPDATE For Another Solution

In case of someone face off with this situation I try another solution and it helps me..

in .html file

in .ts file

 @ViewChild('myForm') myForm: ElementRef;
  ngAfterViewInit() {
    this.myForm.nativeElement.submit();
    console.log("eben");

  }

But still don't know why angular httpclient.post doesn't work

Angular Post with Form Data append but server says expected data is empty, I couldn't find it's reason

0 Answers