<ion-input> name won't accept {{ expression }}

Ionic Framework ionic-v3
1

Hello All,

I’m attempting to setup a page that allows users to add player names. I’m struggling to get the name field of an to accept an expression. Here is my code:

player-create.html

<ion-content padding>
  <div class="block" *ngFor="let player of players">
    <ion-item>
      <ion-label floating>Player {{ player.number }}</ion-label>
      <ion-input type="text" name="{{player.playName}}"></ion-input>
    </ion-item>
  </div>

player-create.ts

export class PlayerCreatePage {
  players: Array<{ number: number, playName: string }> = []

  constructor(public navCtrl: NavController){
    for(let i = 1; i < 4; i++) {
        let content = "play" + i + "name";
        this.players.push({ number: i, playName: content })
    };
  };

When I try to run the code, I get the following error:

Unhandled Promise rejection: Template parse errors:
Can’t bind to ‘name’ since it isn’t a known property of ‘ion-input’.

Any help or advice would be greatly appreciated.

Thank you!

2

Hi there,
the problem is that actually ion-input doesn’t have property name, you can refer to the docs right here Input, I think you might be looking for the value attribute.

<ion-input type="text" value="{{player.playName}}"></ion-input>
3

I think you want this:

<ion-input [(ngModel)]="player.playName">
4

@ricardoNava Hmmm… strange. When I built it before without any fancy stuff, I was able to use

<ion-input type="text" name="play1name"></ion-input>

without receiving any errors, which is why I attempted name in the first place.

@rapropos I think you’re right. I tried running it with ngModel, which didn’t give me the results I was expecting (plus a new error) but it did get me thinking in the right direction. Thank you.