POST形式将答案转换为外部API离子角

Question

我正在尝试使用ionic向外部API发送简单的表单答案。

1-首先，我尝试以我的标准方式

<form action="www.api.com" method="post">
   <input type="text" name="bar">
   <input type="submit">
</form>

但是，当我单击“提交”时，没有任何反应。

2-然后，我尝试使用ngForm作为此问题的答案角2离子形式 。

<form #form method="post" (ngSubmit)="onSubmit()" class="form-horizontal" action="https://localhost:44370/Account/ExternalLogin">
    <div>
        <p>
            <button ion-button block [disabled]="isDisabled" type="submit" title="Log in using your Coinbase account">
                Coinbase
            </button>
            <input type="hidden" name="provider" value="Coinbase">
        </p>
    </div>
</form>

但它说

运行时错误

_co.onSubmit不是函数

所以我在.ts中创建了它

onSubmit() {
    console.log('We are in function onSubmit');
    this.http.post(this.requesturl, postData);
  }

但是现在的问题是如何获取用户放入字段中的数据？

哪个是解决此问题的正确方法？ 我只需要将表单发送到外部API，该怎么办？

我是Angular和Ionic的新手，所以我不知道执行此操作的正确方法。

Answer 1

首先，不需要method="post" 。

添加#form="ngForm"并将(ngSubmit)="onSubmit()"替换为(ngSubmit)="onSubmit(form.value)"如下所示：

<form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="form-horizontal">

您将收到用户在postData参数中的输入字段中放入的数据：

onSubmit(postData:any) {
    console.log(postData);
    this.http.post(this.requesturl, postData);
}

Answer 2

签出工作示例stackblitz

把它放在你的component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  onSubmit() {
    console.log('We are in function onSubmit');

  }
}