Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Erro ao trocar de inputs no form usando tab

Na tela de cadastro, quando eu clico no input de nome para digitar e depois vou apertando TAB para trocar de input, quando ele vai passar do input de email para o input da data, ocorre um erro:

Runtime Error
Error in ./TextInput class TextInput - caused by: nextInput.initFocus is not a function

TypeError: nextInput.initFocus is not a function
    at Form.tabFocus (http://localhost:8100/build/main.js:9279:34)
    at http://localhost:8100/build/main.js:59175:33
    at SafeSubscriber.schedulerFn [as _next] (http://localhost:8100/build/main.js:35051:36)
    at SafeSubscriber.__tryOrUnsub (http://localhost:8100/build/main.js:44280:16)
    at SafeSubscriber.next (http://localhost:8100/build/main.js:44229:22)
    at Subscriber._next (http://localhost:8100/build/main.js:44182:26)
    at Subscriber.next (http://localhost:8100/build/main.js:44146:18)
    at EventEmitter.Subject.next (http://localhost:8100/build/main.js:19498:25)
    at EventEmitter.emit (http://localhost:8100/build/main.js:35031:76)
    at NextInput.receivedFocus (http://localhost:8100/build/main.js:40106:22)

Ionic Framework: 2.0.0
Ionic Native: 2.4.1
Ionic App Scripts: 1.0.0
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.11.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36

Não sei se isso ocorre porque estou no computador e dessa forma o Ionic se perde com o TAB que não existiria no celular.

Alguém sabe?

3 respostas

José, consegue subir um trecho de código da aplicação ou a app para que eu possa dar uma olhada? Não consigo simular o erro só com essa info \o

Meu cadastro.ts:

import { Carro } from '../../domain/carro/carro';
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component ({
    templateUrl: 'cadastro.html'
})
export class CadastroPage 
{
    public carro: Carro;
    public precoTotal: number;
    public nome: string;
    public endereco: string;
    public email: string = 'teste';
    public data: string = new Date().toISOString(); // A data é uma string, pq o component ion-datetime retorna uma string

    constructor (public navCtrl: NavController, public navParams: NavParams) 
    {
        this.carro = this.navParams.get('carro');
        this.precoTotal = this.navParams.get('precoTotal');
    }

    agenda ()
    {
        console.log(this.nome, this.endereco, this.email, this.data);
    }
}

meu cadastro.html:

<ion-header>
    <ion-navbar>
        <ion-title>Estamos quase lá!</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
      <h2>
        {{ carro.nome }}
    </h2>
    <p>R${{ precoTotal }}</p>

    <form (ngSubmit)="agenda()">
        <ion-item>
            <ion-label stacked>Nome</ion-label>
            <!-- 2-way data binding que faz com o valor venha do backend e também vá para lá -->
            <ion-input name="nome" type="text" [(ngModel)]="nome"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label stacked>Endereço</ion-label>
            <ion-input name="endereco" type="text" [(ngModel)]="endereco"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label stacked>E-mail</ion-label>
            <ion-input name="email" type="text" [(ngModel)]="email"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label stacked>Data</ion-label>
             <ion-datetime name="data" displayFormat="DD/MM/YY" type="text" [(ngModel)]="data"></ion-datetime> 
        </ion-item>

        <button ion-button block type="submit">Finalizar agendamento</button>
    </form>
</ion-content>
solução!

Vi em aula posterior do curso que isso é bug do Ionic mesmo.

O instrutor falou que não dá pra usar tab na versão web mesmo, é bug do Ionic.