Bonjour à tous,

Je m'arrache les cheveux pour récupérer les données d'un formulaire dans le fichier TS. Je ne comprends pas pourquoi certaines données sont vides en retour...

Le formulaire: 

<ion-header>
  <ion-navbar>
    <ion-title>Ajout d'une offre</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="bg-image">
  <form [formGroup]="form" (ngSubmit)="ajoutOffre()">
    <ion-grid padding >
      <ion-row>
        <ion-col>
          <h2>Saisissez votre offre</h2>
        </ion-col>
      </ion-row>

      <ion-row>
        <ion-col>
          <!---Input field email-->
          <ion-item>
            <ion-label floating>Titre*</ion-label>
            <ion-input type="text" required
              formControlName="titre"
              [(ngModel)]="offreData.titre"></ion-input>
          </ion-item>
          <!---Input field description-->
          <ion-item>
            <ion-label floating>Description*</ion-label>
            <ion-input type="text" required
              formControlName="description"
              [(ngModel)]="offreData.description"></ion-input>
          </ion-item>
          <!---Input field quantite-->
          <ion-item>
            <ion-label floating>Quantité*</ion-label>
            <ion-input type="text" required
              formControlName="quantite"
              [(ngModel)]="offreData.quantite"></ion-input>
          </ion-item>
          <!---Input field début-->
          <ion-item>
            <ion-label floating>Début*</ion-label>
            <ion-datetime required 
              displayFormat="DD/MM/YYYY h:mm" 
              pickerFormat="DD/MM/YYYY h mm" 
              formControlName="debut" 
              [(ngModel)]="offreData.debut"></ion-datetime>
          </ion-item>
          <!---Input field début-->
          <ion-item>
            <ion-label floating>Fin*</ion-label>
            <ion-datetime required 
              displayFormat="DD/MM/YYYY h:mm" 
              pickerFormat="DD/MM/YYYY h mm" 
              formControlName="fin" 
              [(ngModel)]="offreData.fin"></ion-datetime>
          </ion-item>
          <!---Input field quantite-->
          <ion-item>
            <ion-label floating>Montant TTC (€)*</ion-label>
            <ion-input type="text" required
              formControlName="montantTTC"
              [(ngModel)]="offreData.montantTTC"></ion-input>
          </ion-item>
          <!---Input field reduction-->
          <ion-item>
            <ion-label floating>Réduction (%)*</ion-label>
            <ion-input type="text" required
              formControlName="reduction"
              [(ngModel)]="offreData.reduction"></ion-input>
          </ion-item>
          <!---Input field tva-->
          <ion-item>
            <ion-label>TVA (%)*</ion-label>
            <ion-select [(ngModel)]="tva" required name="tva" formControlName="tva">
              <ion-option value="5,5" selected="true">5,5</ion-option>
              <ion-option value="20">20</ion-option>
            </ion-select>
          </ion-item>
          <!---Input field bio-->
          <ion-item>
            <ion-label>Bio</ion-label>
            <ion-toggle [(ngModel)]="bio" formControlName="bio"></ion-toggle>
          </ion-item>
          <ion-item>
              <p>{{ offreData.bio }}</p>
            </ion-item>
          <!---Input field Halal-->
          <ion-item>
            <ion-label>Halal</ion-label>
            <ion-toggle [(ngModel)]="halal" formControlName="halal" value="true"></ion-toggle>
          </ion-item>
          <!---Input field BonAchat-->
          <ion-item>
            <ion-label>Bon d'achat</ion-label>
            <ion-toggle [(ngModel)]="bonAchat" formControlName="bonAchat" value="true"></ion-toggle>
          </ion-item>
        </ion-col>
      </ion-row>

      <ion-row>
        <!---Send Section-->
        <ion-col align-self-end bottom-form col-12 col-sm-12 col-md-12 offset-lg-3 col-lg-6 offset-xl-3 col-xl-6>
        <!---Login button-->
          <button ion-button  full text-capitalize default-button [disabled]="!form.valid">Ajouter</button>
        </ion-col>
        <!---End Share Section-->
      </ion-row>
  </ion-grid>
  </form>
</ion-content>

Le fichier TS:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { HttpClient, HttpHeaders}  from '@angular/common/http';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';

import { MesOffresPage } from '../mes-offres/mes-offres';

@IonicPage()
@Component({
  selector: 'page-ajout-offre',
  templateUrl: 'ajout-offre.html',
})

export class AjoutOffrePage {
  responseData : any;
  offreData = { "titre":"", "description":"", "quantite":"", "debut":"", "fin":"", "montantTTC":"", "tva":"", "bio":"", "halal":"", "reduction":"", "bonAchat":"" }

  public form                   : FormGroup;

  constructor(public navCtrl    : NavController,
    public http       : HttpClient,
    public NP         : NavParams,
    public fb         : FormBuilder,
    public toastCtrl  : ToastController,
    public authService: AuthServiceProvider) {
 
    // Create form builder validation rules
    this.form = fb.group({
      "titre"         : ["", Validators.required],
      "description"   : ["", Validators.required],
      "quantite"      : ["", Validators.required],
      "debut"         : ["", Validators.required],
      "fin"           : ["", Validators.required],
      "montantTTC"    : ["", Validators.required],
      "tva"           : ["", Validators.required],
      "reduction"     : ["", Validators.required],
      "bio"           : ["", Validators],
      "halal"         : ["", Validators],
      "bonAchat"      : ["", Validators]
    });
  }

  ajoutOffre(){
    console.log(this.offreData);
    this.authService.postData(this.offreData, "ajoutOffre").then((result) =>{
        this.responseData = result;
        //console.log(this.responseData);
        //localStorage.setItem('offreData', JSON.stringify(this.responseData));
        this.navCtrl.setRoot(MesOffresPage);
    }, (err) =>{
        // Connection failed
    })
  }
}

Le premier console.log dans ma méthode me renvoie pas le champ ion-select (tva) et ni les ion-toggle (bio, halal, bonAchat) :

bio: ""
bonAchat: ""
debut: "2018-10-22T03:55:00Z"
description: "Ma description"
fin: "2018-10-23T03:56:00Z"
halal: ""
montantTTC: "20"
quantite: "10"
reduction: "15"
titre: "Mon titre"
tva: ""

Quelqu'un pourrait-il m'aiguiller s'il vous plait ???

OK... Quand on a le yeux qui se croisent il est temps de faire une pause !

-
Edité par fraggle436 22 octobre 2018 à 18:10:17