17

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 can I solve this issue?

Madhu
  • 2,643
  • 6
  • 19
  • 34
  • Also, if `myForm` is not found, then it could indeed be a problem. TS doesn't know the layout of your page. – VLAZ Sep 25 '18 at 06:26
  • 1
    If you’re really sure the element exists, you could work around the default typing using `!`: `document.getElementById('myForm')!.reset()`. – Raphael Schweikert Sep 25 '18 at 06:31
  • I'm using it with AngularJs, It's the controller where I can find `myForm`, But the problem is its giving me an error saying document.getElementById('myForm') may be null before compiling. – Madhu Sep 25 '18 at 06:31
  • @RaphaelSchweikert `document.getElementById('myForm')!` this will work but later if i add `.reset()` it says `[ts] Property 'reset' does not exist on type 'HTMLElement'. any`. – Madhu Sep 25 '18 at 06:33

5 Answers5

36

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()
Titian Cernicova-Dragomir
  • 230,986
  • 31
  • 415
  • 357
  • Non null assertions are forbidden in ts > 3.4.5, just use assertion (the first one). – Takatalvi Jan 10 '20 at 20:28
  • 2
    @Takatalvi Why are they forbidden? This is news to me, could you please provide some docs to that? Maybe you have a lint rule forbidding them but they are still a fuly supported part of the language – Titian Cernicova-Dragomir Jan 10 '20 at 20:32
  • https://palantir.github.io/tslint/rules/no-non-null-assertion/ – Takatalvi Jan 10 '20 at 20:35
  • 4
    @Takatalvi a tslint rule is just a lint rule. One can opt into it or not. There are plenty of code bases that do not opt into forbidding this operator, the TS compiler team being one of them. There is also a TS lint rule that forces you to specify all types which I personally find to be a horrible idea. Opting blindly into every rule is not a good idea. – Titian Cernicova-Dragomir Jan 10 '20 at 20:39
  • Thanks for the clarification. I misunderstood the warning. – Takatalvi Jan 10 '20 at 20:43
  • Based on your helpful TypeScript type casting answer here, I'm hoping you might be able to help me with this similar question: https://stackoverflow.com/q/67522592/470749 Thanks! – Ryan May 13 '21 at 16:14
2

There are different fixes for this. You can edit your tsconfig.json and add

"strictNullChecks": false

to it. This will disable the strict null checks.

If you are absolutely sure that the element exists, you could also use ! to tell typescript that your id will always be there

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

Or if you want to make sure to never get an error because the element indeed doesn't exist, check for its existance

const el = document.getElementById('myForm');
if (el) el.reset();
baao
  • 71,625
  • 17
  • 143
  • 203
  • 3
    `document.getElementById('myForm')!` this will pass the null error but later if i add `.reset()` then it says `[ts] Property 'reset' does not exist on type 'HTMLElement'. any` – Madhu Sep 25 '18 at 06:36
1

Just use this syntax & it will work :

document.getElementById('myForm')!

Community
  • 1
  • 1
Reset
  • 11
  • 1
1

try use typing like this:

const myForm = <HTMLElement>document.getElementById('myForm')
if(myForm ) myForm.reset();
Anjasmara Dwi.S
  • 303
  • 1
  • 8
0

Try a check on the element. Something like:

var myForm = document.getElementById('myForm');
if(myForm) myForm.reset();
abhisek
  • 924
  • 1
  • 13
  • 27