-1

I have my input below:

<input class="form-check-input" type="checkbox" [name]="myCheck">

I want to get the element in TypeScript file and change in it some sort of like:

document.getElementByName("myCheck").checked = true;

But the 'checked' property is not recognizable.

So how should I proceed?

node_modules
  • 4,790
  • 6
  • 21
  • 37
Mohamed Jihed Jaouadi
  • 1,427
  • 4
  • 25
  • 44
  • I didn't see any `id` attribute in your input field. – Hardik Solanki Jan 09 '23 at 15:05
  • @HardikSolanki I updated the content of my question – Mohamed Jihed Jaouadi Jan 09 '23 at 15:07
  • Duplicate of https://stackoverflow.com/questions/8206565/check-uncheck-checkbox-with-javascript – Bernard Borg Jan 09 '23 at 15:09
  • getElementByName doesn't exist - use an ID instead as @HardikSolanki mentioned – Bernard Borg Jan 09 '23 at 15:10
  • 1
    @BernardBorg getElementByName() function exists ! – Mohamed Jihed Jaouadi Jan 09 '23 at 15:18
  • It does not. It's getElementsByName(). Note the s after Element – Bernard Borg Jan 09 '23 at 15:20
  • Does this answer your question? [Keep checkbox checked in angular](https://stackoverflow.com/questions/62891765/keep-checkbox-checked-in-angular) – jeremy-denis Jan 09 '23 at 15:20
  • with vanilla js you will not be able to access angular input -> an angular way to do this is to use viewChild – jeremy-denis Jan 09 '23 at 15:20
  • 1
    You have not an angular valid html. This code give you error. You should understand a minimum about Angular, binding and interpolation. BTW all the responses looks like not try make a [tour of heroes](https://angular.io/tutorial/tour-of-heroes), not understand nothing. I know that it's about four hours but sincerily all of you stole me the force to answer. – Eliseo Jan 09 '23 at 15:25
  • this is cause by a typo. either you're using angular wrong or html wrong. The name of the element is specified either by using `name="myCheck"` or in Angular `[name]="'myCheck'"`. In your case you're setting the name of the element to the value of component property `myCheck` which might be null or undefined. – kvetis Jan 09 '23 at 15:35

2 Answers2

1

You're using getElementByName, but that's not a valid function. It should be getElementsByName and then give a valid index.

You can also use querySelector("[name='myCheck']").

As for typescript:

You first have to let typescript know what the element exactly is:

const checkboxEl = document.getElementsByName("myCheck")[0] as HTMLInputElement;
checkboxEl.checked = true;
Jelmer Overeem
  • 359
  • 1
  • 10
  • "HtmlInputCheckBox" class do not exist – Mohamed Jihed Jaouadi Jan 09 '23 at 15:27
  • why not use `[(ngModel)]`? Angular is **not** javascript. Angular is simply declare variables in .ts that you use as [interpolation](https://angular.io/guide/interpolation) or [binding](https://angular.io/guide/binding-overview) in your .html. – Eliseo Jan 09 '23 at 17:11
-1

getElementsByName return the collection either use the ID or access the first element

 document.getElementsByName("myCheck")[0].checked = true;
Vasim Hayat
  • 909
  • 11
  • 16