Error with checked property and value in Angular

Asked

Viewed 476 times

1

I am trying to use a code to get the value of the selected radio button and I am facing the following errors:

Checked property does not exist in type 'Htmlelement'.

The property 'value' does not exist in type Nodelistof<Htmlelement>.

Follows my code : 

getRadioValor(name){
  var rads = document.getElementsByName(name);

  for(var i = 0; i< rads.length; i++){
    if(rads[i].checked){
      return rads.value;
    }
  }
}

What is the reason for these errors? And how to solve ?

javascript angular angular-material

  • https://stackoverflow.com/questions/47492595/why-foreach-does-not-exist-on-nodelistof

  • I’m sorry, but I couldn’t quite understand what’s causing the error ...

2 answers

0


A simple way that I use to get the checked value of radios with even name in pure Javascript is like this: 

getRadioValor(name){
  const radioValue = document.querySelector(`input[name = ${name}]:checked`).value;
  console.log(radioValue);
}

How are you utilizing the angular-material you must do in the event change of <mat-radio-button>, thus:

<mat-radio-button nome="R0" class="margem" value="1" (change)="getRadioValor($event)"
  0
</mat-radio-button>

And the method stays like this: 

getRadioValor(event) {
 console.log(event.value)
}

  • is giving error in . value : "The value property does not exist in type 'Element'. For some reason the property . value is not recognized in my file, would know why ?

  • querySelector returns an Element because it does not know what is coming in the query, make a cast, thus: (document.querySelector(input[name = ${name}]:checked) as HTMLInputElement).value;

  • Okay, you solved the mistake of. value, however, now when I select the radio button and call the getRadioValor method, my form gives the following error : ERROR Typeerror: Cannot read Property 'value' of null

  • It will give this return if it does not find any value checked, this is even something you need to treat later, but until you have a check it keeps giving the error?

  • Yes, I am calling the method in the event (click) of my radio button, so if it is selected the method is called.

  • Follow the radio button code: <mat-radio-button name="R0" class="margin" value="1" (click)="getRadioValor(R0)">0</mat-radio-button>

  • I edited my answer with your question in Angular Material

  • Okay, as soon as I can I’ll test and get back to you .

  • It worked perfectly, thank you very much !

  • Don’t forget to mark it as the correct answer. Thank you!

Show 5 more comments

0

Checked property does not exist in type 'Htmlelement'.

It means that the name that you passed did not return elements of the type radio or checkbox (are the ones that contain the property checked). Check that there are no other elements with the same name.

The property 'value' does not exist in type Nodelistof.

You forgot the [i] to access a Nodelist element and ended up trying to access the property value Nodelist instead of Htmlelement. Just change:

return rads.value;

To:

return rads[i].value;

Follow a functional example:

function getRadioValue(name) {
  let radios = document.querySelectorAll(`input[name=${name}]`);
  
  for (let i=0, l=radios.length ; i<l ; i++) {
    let radio = radios[i];
    
    if (radio.checked) return radio.value;
  }
  
}


let btn = document.querySelector('#btn');

btn.addEventListener('click', () => {
  console.log(getRadioValue('teste'));
});
<label>
  <input type="radio" name="teste" value="1">
  Radio 1
</label>

<label>
  <input type="radio" name="teste" value="2">
  Radio 2
</label>

<label>
  <input type="radio" name="teste" value="3">
  Radio 3
</label>

<br>

<button id="btn">Log selected</button>

  • Thank you so much for clearing up my mistakes :)

Browser other questions tagged javascript angular angular-material

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