Discussion :

[PrincesseFlora]

Bonjour,

je me permets de vous demander de l'aide, car j'ai un souci pour récupérer les valeurs d'input avec Ionic

J'ai le code suivant, qui me permet de saisir le prénom d'un joueur, et d'ajouter le lien vers une image
Or quand je clique sur le bouton "ajouter joueur", je n'arrive pas à récupérer les valeurs des 2 inputs.
Pourriez vous m'aider svp ???

ajout-joueur.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<ion-content [fullscreen]="true">
  <ion-button expand="full" color="primary" href="/home">
    <ion-icon name="arrow-back-outline"></ion-icon>
    Ajout Légende France 98
  </ion-button>
 
  <ion-item>
    <ion-label>Numéro</ion-label>
    <ion-input type="number" [(ngModel)]="joueur_en_cours.id" [ngModelOptions]="{standalone: true}" disabled
      value="{{joueur_en_cours.id}}" [ngModelOptions]="{standalone: true}">
    </ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Prénom Nom</ion-label>
    <ion-input type=" text" name="name" [(ngModel)]="joueur_en_cours.name" [ngModelOptions]="{standalone: true}">
    </ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Lien image</ion-label>
    <ion-input name="imagePath" [(ngModel)]="joueur_en_cours.imagePath" [ngModelOptions]="{standalone: true}">
    </ion-input>
  </ion-item>
  <button class="btn btn-primary" class="btn btn-primary" (click)="onAjout(joueur_en_cours)">Ajouter joueur</button>
  <button type="reset" class="btn btn-danger">Vider l'ajout</button>
 
</ion-content>

ajout-joueur.component.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { Component, Input } from '@angular/core';
import { JoueursService, arrJoueur } from '../service/joueurs.service';
import { Router, ActivatedRoute } from '@angular/router';
 
@Component({
  selector: 'app-ajout-joueur',
  templateUrl: './ajout-joueur.component.html',
  styleUrls: ['./ajout-joueur.component.scss'],
})
export class AjoutJoueurComponent {
  @Input() joueur_en_cours: arrJoueur;
  max_id: number;
  @Input() name: string;
  @Input() imagePath: string
  constructor(private JoueursService: JoueursService, private router: Router, private route: ActivatedRoute) {
 
    let id = this.route.snapshot.paramMap.get('id');
    let nid = Number(id);
 
    this.joueur_en_cours = {
      id: nid,
      name: "",
      imagePath: ""
    };
  }
 
  onAjout(joueur: arrJoueur) {
    console.log(joueur);
 
  }
}

Dans la console, j'ai le résultat suivant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{id: 20, name: "", imagePath: ""}

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<button class="btn btn-primary" class="btn btn-primary" (click)="onAjout()">Ajouter joueur</button>
 
...
...
 
 onAjout() {
    console.log(joueur_en_cours);
  }

[PrincesseFlora]

Bonjour,
merci pour ta réponse, mais cela ne résout pas mon problème

[krakatoa]

tu peux mettre ton code sur stackblitz
et donner le lien d'édition afin qu'on puisse voir en live