Récupérer la valeur des inputs avec Ionic
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:
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:
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:
{id: 20, name: "", imagePath: ""}
