Как отправить данные формы на сервер, ожидающий обычную форму HTML, используя угловую реактив? - PullRequest
Новая
       7

Как отправить данные формы на сервер, ожидающий обычную форму HTML, используя угловую реактив?

1 голос
/ 12 апреля 2019

Я заменяю статическую форму, которая отправляет данные в старый скрипт Perl, на угловую реактивную форму.Я не могу понять, как отформатировать данные формы и отправить их, используя HttpClient.post.Множество примеров, которые я вижу для публикации таким способом, фактически создает объект данных в самом запросе, а не из реальной формы, поэтому я озадачен

Я попытался опубликовать данные как простоформа, как JSON (я не уверен, что сервер ожидает JSON, он действительно старый), отправка объекта данных формы в контроллер

исходная статическая форма <form> тег: 

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

Это было просто отправлено с использованием обычного ввода HTML, и это прекрасно работает.

Мой новый шаблон: 

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

Контроллер (части) 

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

console.warn(this.opieForm.value); производит вывод: 

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

Возвращаемая ошибка 

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"

Текст ошибки: 

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

Когда форма отправляется правильно, она перенаправляетна страницу успеха и отправляет электронное письмо.

...