accessing a basic input field from typescript

Question

This has been driving me nuts.

got a hidden input box as follows <input type='hidden' id='iFrameDrivenImageValue' value='n/a'>

And I'm trying to read its value from .ts to submit to DB. But cannot compile the TS. Stopped by an error that reads like this: ERROR in /Users/...component.ts (4773,89): Property 'value' does not exist on type 'HTMLElement'.

tried <HTMLInputElement>document.getElementById("iFrameDrivenImageValue").value;

tried <HTMLInputElement>document.getElementById("iFrameDrivenImageValue")?.value;

tried theForm.form.controls['iFrameDrivenImageValue'].value;

When I step thru with the chrome's debugger, the console got no problems spitting out the value of document.getElementById("iFrameDrivenImageValue").value as 'n/a'.

How can I get TS also see the same thing? Or at least cool it off so I can compile the darn script?

Someone may ask why not go banana in the box and bind it two-way? Well, the reason I am flirting with this mickey mouse way of trying to get to the value is because Angular does not see the change within an ngForm input field (when an iFrame script updates the value within that input field ). Go Figure!

As far as Angular is concerned, that iframe driven/changed value within the ngForm is still pristine and the theForm.form.controls is unaware of its recently updaed value.

Since all of these efforts failed, I was forced to try to go old-school way, but cannot get TS compile.

If you control the script in the iframe...might consider using postMessage API to communicate between the 2 windows when value does get changed. Or use storage events if both are on same domain — charlietfl
– charlietfl, Commented Jan 8, 2018 at 1:00
I will look into that later. I solved the challenge in a different way - which I posted as my own answer, thank you for your help. — Average Joe
– Average Joe, Commented Jan 8, 2018 at 12:10

Uğur Dinç · Accepted Answer · 2018-01-08 00:57:50Z

6

Consider using @ViewChild instead of document.getElementById by changing your input to this:

<input #myInput type='hidden' id='iFrameDrivenImageValue' value='n/a'>

And then you can access your element from your component like this:

@ViewChild('myInput') myInput;

ngOnInit() {
    console.log(this.myInput);
}

answered Jan 8, 2018 at 0:57

Uğur Dinç

2,4652 gold badges20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Average Joe Over a year ago

I haven't worked with @ViewChild before. I will try that later. Thank you for your help.

Ramesh Pareek Over a year ago

can I change the value dynamically. e.g. if I say this.myInput = "Tom Cruz" Will It reflect in the form?

Uğur Dinç Over a year ago

@RameshPareek Yes, you should be able to. First, change it to this: @ViewChild('firstNameInput') firstNameInput: ElementRef; . Then access it like this: this.firstNameInput.nativeElement.value = 'test';

Average Joe · Accepted Answer · 2018-01-08 12:05:26Z

0

My own solution to this was to use localStorage!

I let the iframe to write to the localStorage and then let Angular pick up what's in the localStorage.

After I am done with the data transfer, I delete/nullify the localStorage and move on.

For this to work, iframed doc and your angy got to be on the same domain. But this should not be an issue in this case, (cause if that was an issue, ) then you wouldn't be able to update the parent window from the iframe, from the get-go anyway.

Not recommending it as a better way, but as a way that is sure-shot.

answered Jan 8, 2018 at 12:05

Average Joe

4,64111 gold badges58 silver badges84 bronze badges

Collectives™ on Stack Overflow

accessing a basic input field from typescript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related