Ionic 3 / angular ngForm не отправляет данные

Question

Я создаю простое приложение crud с ionic 3, но не могу вставить новые данные в базу данных, потому что php-сервер получает пустой почтовый массив.

Мой ионный / угловой код:

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