Question

我要用角度反应性形式替换将数据发送到旧的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.
...

正确提交表单后，它将重定向到成功页面并发送电子邮件。

如何使用angular react将表单数据发布到期望使用常规HTML表单的服务器？

0 个答案: