Búsqueda de sitios web

json - ¿Cómo enviar datos de un formulario a un servidor que espera un formulario HTML regular usando Angular reactivo?


Estoy reemplazando un formulario estático que envía datos a un antiguo script de Perl por un formulario reactivo de Angular. No puedo averiguar cómo formatear los datos del formulario y enviarlos usando HttpClient.post. Muchos de los ejemplos que veo para publicar de esta manera realmente crean el objeto de datos en la propia solicitud, no provienen de un formulario real, así que estoy atascado.

He intentado publicar los datos solo como el formulario, como JSON (no estoy seguro de que el servidor espere JSON, es realmente antiguo), enviando el objeto de datos del formulario en el controlador

la etiqueta de formulario estática original <form>:

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

Esto fue enviado solo usando un botón de envío HTML normal, y eso funciona bien.

Mi nueva plantilla:

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

El controlador (partes)

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));
  }

El console.warn(this.opieForm.value); produce el siguiente resultado:

{TITLE: "test", First__bName: "test", Last__bName: "test", Email__bAddress: "[email ", dateNeeded: {…}, …}

El error que se devuelve

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"

Texto de error:

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.
...

Cuando el formulario se envía correctamente, redirige a una página de éxito y envía un correo electrónico.