Ionic 3 Property 'value' does not exist on type 'Htmlelement'

Asked

Viewed 319 times

0

I’m developing my first App using Ionic 3, and since I don’t have much experience in Typescript, I added jQuery to the project to perform functions such as enabling and disabling a textarea, or showing some element as well... I have a page where I need to get the value of characters typed in the textarea, being equal to or greater than 1, display the NEXT button...

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();
          }
        });
      });
    });
  }

the problem is that, the textarea field returns the type Htmlelement that does not contain property . value, returning the error Property 'value' does not exist on type 'Htmlelement'. I searched the forum and saw that we can solve this problem using this method

var txtInput = (<HTMLInputElement>document.getElementById('.text-input')).value;

but I am not succeeding in applying it, in the form below generates me the following error: 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();
          }
        });
      });
    });
  }

Could you give me some tips on how to solve this mistake? I’d like to thank you!

html jquery ionic typescript

  • Good morning, I appreciate the help! the element is located by the same class, in any case the code would look like this? as I the correct position of the element in the class? var txtInput = (<HTMLInputElement>document.getElementsByClassName('.text-input')[index]).value;

  • @Miguelcampos if you want to use "native" methods (from document), as getElementById, getElementsByClassName and getElementsByTagName; you just need to put the names, don’t need the "rules of query" (place #, ., etc..).

  • understood, on this page then the position of the array is 0 same, we solved one of the errors, but now it is returning me ERROR TypeError: event is not a function&#xA; at HTMLTextAreaElement.<anonymous>

  • The error is on the same line?

  • I’m having a different error @Sam apparently I’m having trouble converting the type, returns me the following error Type 'HTMLCollectionOf<Element>' cannot be converted to type 'HTMLInputElement' on the line var inputFields = document.getElementsByClassName('text-input') as HTMLInputElement;

  • It’s just that I don’t understand these technologies you’re using, only JS.

  • @Miguelcampos you’re trying to use one HTMLCollection, as an element <input>. First, you forgot to set an index to pick a specific "list" element; second, if text-input is a <textarea>, so I guess instead of HTMLInputElement, you should put HTMLTextAreaElement; and third, I think it would be better to open up new questions to the new mistakes you are getting, because I think it is not appropriate to stay answering here in the comments.

Show 2 more comments

1 answer

0

You can solve this problem using the angular itself, so do more or less as follows:

<input type="checkbox" (click)="meuinput = 'Sem móveis para desmontar.'">
<label>Meu checkbox</label><br>
   
<input  placeholder="Meu Input de teste" [(ngModel)]="meuinput"><br>
<button *ngIf="meuinput">Next</button>

Browser other questions tagged html jquery ionic typescript

You are not signed in. Login or sign up in order to post.