3

Preciso criar um evento click que ao ser pressionado crie um input na view. Como posso fazer isso ? Obrigado Ps: uso ionic2 typescript

HTML

<ion-navbar *navbar>
  <ion-title>
    POSimplex
  </ion-title>
</ion-navbar>

<ion-content class="home" padding>
  <button ion-button full>Login</button>
  <p>
    <button ion-button full>Criar conta</button>
  </p>
  <p>{{ sl }}</p>
</ion-content>

Typescript

import {Component} from "@angular/core";
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  sl: string
  constructor(private navController: NavController) {this.sl = '<button ion-button full>Criar conta</button>'}
}

2
  • O que você já fez? Poste o código para melhor lhe ajudarmos. Commented 5/10/2016 às 23:17
  • Na realidade tentei fazer um teste sem o click, só para testar ... Commented 5/10/2016 às 23:20

1 Resposta 1

3

Coloque o evento de click:

<button ion-button full (click)="inserirCampo()">Adicionar campo</button>

Como você já deve saber, o Ionic usa o AngularJS, a inserção "infinita" de elementos no DOM (que eu costumo fazer), consiste em ter uma div contendo um repeater (ngFor) trabalhando sobre uma variável do escopo.

<div *ngFor="let item of inputs">
    <input type="text">
</div>

Com isso, na sua função inserirCampo você vai inserir um novo item na sua variável do escopo:

this.inputs.push(novoItem);

Tendo o two way data binding do Angular, assim que você inserir na variável do escopo, o input será exibido na página.

Typescript:

export class MinhaPagina {
  inputs: Array<{title: string, type: string, value: string}>;

  constructor(public navCtrl: NavController, public navParams: NavParams) {

      this.inputs = [
          { title: "teste", type: "text", value: "valor" },
          { title: "teste2", type: "text", value: "valor2" }
      ];
  }

  adicionarCampo() {
      this.inputs.push({ title: "teste", type: "text", value: "valor" });
  }
}

.html

<ion-content>
    <ion-list>
        <ion-item *ngFor="let item of inputs">
            <ion-label fixed>{{item.title}}</ion-label>
            <ion-input type="{{item.type}}" value="{{item.value}}"></ion-input>
        </ion-item>
    </ion-list>
    <button ion-button class="button" (click)="adicionarCampo()">Adicionar campo</button>
</ion-content>

inserir a descrição da imagem aqui

Obs. Seu código não funcionava porque você usou *ngfor ao invés de *ngFor

10
  • sem sucesso ... Commented 5/10/2016 às 23:49
  • @AugustoFurlan O que você não conseguiu fazer? Commented 6/10/2016 às 0:01
  • coloquei como vc falou, mas não deu certo ... Commented 6/10/2016 às 0:01
  • @AugustoFurlan A solução que eu propus funciona. Estou criando um fiddle pra te mostrar e já posto aqui Commented 6/10/2016 às 0:04
  • ok muito obg... Commented 6/10/2016 às 0:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .