Ionic 3 / angular ngForm不发送数据答案

【问题标题】：Ionic 3 / angular ngForm not sending dataIonic 3 / angular ngForm不发送数据
【发布时间】：2018-05-15 21:18:34
【问题描述】：

我正在使用 ionic 3 构建一个简单的 crud 应用程序，但我无法将新数据插入数据库，因为 php 服务器正在获取一个空的 post 数组。

我的离子/角度代码：

插入.html

<form #f="ngForm" (ngSubmit)="envioDato(f)">

  <ion-list>

    <ion-item>
      <ion-label floating>Nombre</ion-label>
      <ion-input type="text" name="name" ngModel #name = "ngModel"></ion-input>
    </ion-item> 
    <ion-item>
      <ion-label floating>Precio</ion-label>
      <ion-input type="text" name="price" ngModel #price = "ngModel"></ion-input>
    </ion-item> 
    <ion-item>
      <button ion-button full block color = "danger"> Enviar </button>
    </ion-item>
  </ion-list>

  </form>

Insert.ts，这是表格中指定的方法

envioDato(req){

    this.service.dataRegister(req.value).subscribe(

        data=> {
            this.showAlert(data.mensaje);
            this.navCtrl.setRoot(HomePage);
            console.log(data);
        },
        err=>console.log(err)

    )

  }

这是 serviceProvider 中将数据发送到服务器的方法：

dataRegister(params){
    return this.http.post(this.api+'insert.php', params, {
        headers: {"content-Type" : "applicaton/x-www-form-urlencoded"}

    }).map((res:Response) => {return res;});
  }

我可以从服务器获得响应，但是我无法将表单的数据发送到服务器，谢谢建议。

【问题讨论】：

标签： html angular typescript ionic3

【解决方案1】：

由于您使用的是template-driven 方法，因此无需将您的inputs 分配给局部变量。只需将ng-model 指令添加到它们。此外，我认为您需要在表单中添加type="submit"。

像这样：

<form #f="ngForm" (ngSubmit)="envioDato(f)">
    <ion-list>
        <ion-item>
            <ion-label floating>Nombre</ion-label>
            <ion-input type="text" name="name" ngModel></ion-input>
        </ion-item> 
        <ion-item>
            <ion-label floating>Precio</ion-label>
            <ion-input type="text" name="price" ngModel></ion-input>
        </ion-item> 
        <ion-item>
            <button ion-button full block color = "danger" type="submit"> Enviar </button>
        </ion-item>
    </ion-list>
</form>

我还建议您以角度方式创建httpOptions：

const httpOptions = {
  headers: new HttpHeaders({
    'content-Type' : 'applicaton/x-www-form-urlencoded'
  })
};

然后像这样传递它：

return this.http.post(this.api+'insert.php', params, httpOptions).map((res:Response) => {return res;});

【讨论】：