2

I'm replacing a static form that sends data to an old perl script with an angular reactive form. I can't figure out how to format the form data and send it using HttpClient.post. A lot of examples I'm seeing for posting this way actually create the data object in the request itself, not coming from an actual form, so I'm stumped

I've tried posting the data as just the form, as JSON (I'm not sure the server is expecting JSON, it's really old), sending the form's data object in the controller

the original static form <form> tag:

<form id="HTML_FORM"  method="POST" role="form" action="https://sos.cnm.edu/MRcgi/MRProcessIncomingForms.pl" >

This was just submitted using a regular HTML submit input, and that works fine.

My new template:

<form [formGroup]="opieForm" (ngSubmit)="onSubmit()">
<input type="text" class="form-control" id="TITLE" formControlName="TITLE" #TITLE placeholder="required" >
...
<button class="btn btn-primary" [disabled]="!opieForm.valid" type="submit">Submit form</button>
</form>

The controller (parts)

opieForm: FormGroup;
httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/x-www-form-urlencoded'
})};

this.opieForm = this.fb.group({
      TITLE: [ '', Validators.required ],
      // lots of other inputs
})

onSubmit = () => {
    console.warn(this.opieForm.value);
    return this.http.post('https://sos.cnm.edu/MRcgi/MRProcessIncomingForms.pl', this.opieForm.value, this.httpOptions)
      .subscribe(res => console.log(res), error => console.error(error));
  }

The console.warn(this.opieForm.value); produces output:

{TITLE: "test", First__bName: "test", Last__bName: "test", Email__bAddress: "test@test.com", dateNeeded: {…}, …}

The error that's returned

HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "https://sos.cnm.edu/MRcgi/MRProcessIncomingForms.pl", ok: false, …}
error: {error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt…, text: "<!DOCTYPE>↵ <HTML>↵ <!-- FP VERSION: 11.6.04 -->↵↵…ipt language = "javascript">self.close()</script>"}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure during parsing for https://sos.cnm.edu/MRcgi/MRProcessIncomingForms.pl"
name: "HttpErrorResponse"
ok: false
status: 200
statusText: "OK"
url: "https://sos.cnm.edu/MRcgi/MRProcessIncomingForms.pl"

Error text:

SyntaxError: Unexpected token < in JSON at position 0↵    at JSON.parse (<anonymous>)↵    at XMLHttpRequest.onLoad (http://localhost:4200/vendor.js:7639:51)↵    at ZoneDelegate.push.
...

When the form submits correctly it redirects to a success page and sends an email.

Gene Higgins
  • 525
  • 3
  • 5
  • 16
  • 1
    It seems that the endpoint?API is not returning a JSON. – Christian Benseler Apr 12 '19 at 17:17
  • 1
    If you have to change the response type, check this thread https://stackoverflow.com/questions/49319272/angular-5-httpclient-observe-and-responsetype-blob you can send a responseType in the request's headers. – Christian Benseler Apr 12 '19 at 17:19
  • I'm not sure the terms endpoint or API existed when this script was written. It's an old POS. But it works. How would I know what responseType is necessary? What responseType does a static form send? Not to be confused with Content-Type? – Gene Higgins Apr 12 '19 at 19:01
  • Inspect it via browser's console or using a tool like Postman to query the endpoint and inspect the response. – Christian Benseler Apr 12 '19 at 20:48
  • `Postman returns Content-Type →text/html; charset=utf-8 Content-Encoding →gzip ETag →"" Vary →Accept-Encoding Server →Microsoft-IIS/7.5 Date →Mon, 15 Apr 2019 16:11:23 GMT Connection →close` @ChristianBenseler – Gene Higgins Apr 15 '19 at 16:17
  • 1
    So it explains: the endpoint does not return a json. You have to change the request, ni the Angular application, to query this content-type (because the default is JSON) and then parse the data in a proper way. – Christian Benseler Apr 15 '19 at 17:12
  • 1
    I set `responseType: 'text'` and no longer received errors. I couldn't tell if the error was coming from the server or if angular was complaining that it couldn't parse what was coming back from the server, but now I know it was the latter. I also changed the `Accept` to `text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8` but I'm not sure if that made a difference. Thanks @ChristianBenseler – Gene Higgins Apr 17 '19 at 15:23

0 Answers0