How to use document getElementById method in TypeScript

0 votes

I am trying to reset HTML Form in order to clear all the values in the input fields using;

document.getElementById('myForm').reset(); 

But I can use that in typescript, it's giving me an error saying document.getElementById('myForm') may be null

How do I solve this?

Jun 14, 2022 in TypeSript by Logan
• 2,140 points
2,544 views

1 answer to this question.

0 votes

Typescript will force you to check the value is not null if you use the strictNullChecks option (or strict which includes strictNullChecks). You can either perform the test or use a not null assertion (!). Also you will need to use a type assertion to assert the html element is an HTMLFormElement as by default it will be just an HtmlElement and reset is present only HTMLFormElement

Just an assertion Assertion:

(document.getElementById('myForm') as HTMLFormElement).reset();

Assertion with check (recommended):

let form = document.getElementById('myForm')
if(form) (form as HTMLFormElement).reset(); 

Not null assertion (if you want to access just HtmlElement member):

document.getElementById('myForm')!.click()
answered Jun 15, 2022 by Nina
• 3,020 points

Related Questions In TypeSript

0 votes
1 answer

How to use useState hook in React with typescript correctly?

You can set a string type for it Explicit way: const ...READ MORE

answered Aug 3, 2022 in TypeSript by Abhinaya
• 1,160 points
1,019 views
0 votes
1 answer

How to create ES6 Map in Typescript

Refer this as an example this.configs = new ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,020 points
92 views
0 votes
1 answer

How to declare and initialize a Dictionary in Typescript

Apparently this doesn't work when passing the ...READ MORE

answered May 31, 2022 in TypeSript by Nina
• 3,020 points
2,240 views
0 votes
1 answer
0 votes
0 answers

ngx-image-cropper imageloaded() not passing any image data to typescript file event method

I'm using ngx-image-cropper to load and crop images. According ...READ MORE

Jul 5, 2022 in TypeSript by Logan
• 2,140 points
525 views
+1 vote
1 answer

What is the relationship between angularjs Scope with controller/view?

Let us consider the below block: <div ng-controller="emp"> ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,840 points

edited Jan 21, 2020 by Niroj 518 views
+1 vote
1 answer

What is css box module?

Hey, All the element present in html follows ...READ MORE

answered Jan 20, 2020 in Web Development by Niroj
• 82,840 points

edited Jan 21, 2020 by Niroj 617 views
0 votes
3 answers

Explain the difference between visibility:hidden; and display:none?

display:none means that the tag in question will ...READ MORE

answered Dec 14, 2020 in Web Development by Gitika
• 65,910 points
103,896 views
0 votes
1 answer

How to use moment.js library in angular 2 typescript app?

REFERENCE: https://momentjs.com/docs/#/use-it/typescript/ You can install this by using: npm install ...READ MORE

answered Jun 1, 2022 in TypeSript by Nina
• 3,020 points
589 views
0 votes
1 answer

How to use useState hook in React with TypeScript correctly?

Without any initial argument, the type of email and setEmail will ...READ MORE

answered Jun 10, 2022 in TypeSript by Nina
• 3,020 points
923 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP