Estou desenvolvendo meu primeiro App usando o Ionic 3, e como não tenho muita experiência em Typescript, adicionei o jQuery ao projeto para executar funções como habilitar e desabilitar uma textarea, ou mostrar algum elemento, pois bem... Tenho uma página onde preciso obter o valor de caracteres digitados na textarea, sendo igual ou maior que 1, exibir o botão NEXT...
list.ts
ngAfterViewInit() {
$(document).ready(function() {
$('.next').hide();
$(function() {
$('.text-input').on('keyup', function(event) {
if (event.currentTarget.value.length >= 1) {
$('.next').show();
} else {
$('.next').hide();
}
});
});
$(function() {
$('.checkbox').on('click', function() {
$('.text-input').toggleClass('checked').prop('disabled', function(i, v) { return !v; });
if ($('.text-input').hasClass('checked')) {
$('.text-input').val('Sem móveis para desmontar.');
$('.next').show();
} else {
$('.text-input').val('');
$('.next').hide();
}
});
});
});
}
o problema é que, o campo textarea retorna o tipo HTMLElement que não contém propriedade .value, retornando o erro Property 'value' does not exist on type 'HTMLElement'. Eu pesquisei no fórum e vi que podemos solucionar esse problema usando esse método
var txtInput = (<HTMLInputElement>document.getElementById('.text-input')).value;
mas não estou tendo sucesso em aplica-lo, na forma abaixo me gera o seguinte erro: Uncaught (in promise): TypeError: Cannot read property 'value' of null TypeError: Cannot read property 'value' of null
ngAfterViewInit() {
var txtInput = (<HTMLInputElement>document.getElementById('.text-input')).value;
$(document).ready(function() {
$('.next').hide();
$(function() {
$('.text-input').on('keyup', function(event) {
if (event.txtInput.length >= 1) {
$('.next').show();
} else {
$('.next').hide();
}
});
});
$(function() {
$('.checkbox').on('click', function() {
$('.text-input').toggleClass('checked').prop('disabled', function(i, v) { return !v; });
if ($('.text-input').hasClass('checked')) {
$('.text-input').val('Sem móveis para desmontar.');
$('.next').show();
} else {
$('.text-input').val('');
$('.next').hide();
}
});
});
});
}
poderiam me dar dicas de como resolver esse erro? desde já Agradeço!
var txtInput = (<HTMLInputElement>document.getElementsByClassName('.text-input')[index]).value;
document
), comogetElementById
,getElementsByClassName
egetElementsByTagName
; você só precisa colocar os nomes, não precisa das "regras de query" (colocar#
,.
, etc.).ERROR TypeError: event is not a function at HTMLTextAreaElement.<anonymous>
Type 'HTMLCollectionOf<Element>' cannot be converted to type 'HTMLInputElement'
na linhavar inputFields = document.getElementsByClassName('text-input') as HTMLInputElement;