Ionic-Angular : pass existed input string from API with ngModel

Question

I work on Ionic 5 with Angular framework.
My goal is to send values in my component with ngModel directive. Some of these values are already filled because they are coming from an external API. When I click on the submit button the values are not sent to the component file..
I have a "undefined" console message..

Here are my files :
Template :

<ion-item *ngFor="let k of api">
 <ion-input type="text" [(ngModel)]="xzh">{{k.variable0}}</ion-input> 
 <ion-input type="text" [(ngModel)]="yzh">{{k.variable1}}</ion-input> 
 <ion-button size="small" color="success" (click)="sendValues()"><ion-icon name="location-outline"></ion-icon></ion-button>
</ion-item>

Component :

public xzh: string;
[...]
 sendValues(){
      console.log(this.xzh);
 }

How could I do to pass that strings to my component, with ngModel ?

Any help would be greatly appreciated.

Nikunj Munjiyasara · Accepted Answer · 2020-06-29 08:43:55Z

2

You can do using below code:

<ion-item *ngFor="let k of api; let i= index;'">
<ion-input type="text" [(ngModel)]="k.x">{{k.x}}</ion-input> 
<ion-input type="text" [(ngModel)]="k.y">{{k.y}}</ion-input> 
<ion-button size="small" color="success" (click)="sendValues(i)"><ion-icon 
name="location-outline"></ion-icon></ion-button>
</ion-item>

or in ts file you get the value of input as below:

sendValues(i){
  console.log(this.api[i].x);
  console.log(this.api[i].y);
  }

answered Jun 29, 2020 at 8:43

Nikunj Munjiyasara

6844 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrita Sharma · Accepted Answer · 2020-06-29 08:24:25Z

0

Use interpolation {{}} to display the text "Name 1"

Try like this:

.ts

public xzh: string = "Name 1"

.html

<ion-input type="text" [(ngModel)]="xzh">{{xzh}}</ion-input>

answered Jun 29, 2020 at 8:24

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

1 Comment

Julien Over a year ago

Thanks for your answer.. I made some edits to make my probleme more understandable..

Collectives™ on Stack Overflow

Ionic-Angular : pass existed input string from API with ngModel

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related