Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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?
                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, 2018 at 6:26
                If you’re really sure the element exists, you could work around the default typing using !: document.getElementById('myForm')!.reset().
– Raphael Schweikert
                Sep 25, 2018 at 6: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, 2018 at 6: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, 2018 at 6:33
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()
                @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, 2020 at 20:32
                @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, 2020 at 20:39
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();
                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, 2018 at 6:36
Try a check on the element. Something like:
var myForm = document.getElementById('myForm');
if(myForm) myForm.reset();
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.