Question

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

我的离子/角度代码：

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

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

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

Ionic 3 / angular ngForm不发送数据

1 个答案: