So we rendered our first foreign.
But what you'll notice is that the styling is a bit off.
I mean the form looks OK but some distance between the edges of our screen at the forum would be nice
if you dive into the APC is as follows you will actually detect that there we have a user input I.D.
selector where we do add some margin padding so that doesn't sound too bad.
So actually what we can do is an apt yes.
When we create our element here or when we get access to it we can reach out to the element and add
an idea here which should be user dash input.
This will make sure that that rendered element has does idea and hence if this reloads does looks much
nicer if we inspect doesn't a browser daft rules we see the idea here and that's the reason for it is
better styling.
With that we're already doing the next step we're interacting with the element.
Now this is not the only interaction I want to do since we have a form here.
I want to get access to the different form inputs we have here so that we can read the values when the
form gets submitted and then we also then set about event listener here to the submission and validate
the user inputs.
So we need access to the button were to the form overall to listen for the submission and to all the
input elements to get the latest values from their for dad here before we attach everything.
But after I assigned my I.D. to the element here I want to get access to the different inputs in that
element in that forum.
And I want to store them as properties of this class so I'll add more fields up there.
And the first field could be a title input element field the type will be aged him l input element like
this and we'll not just needed once we need two ever similar fields.
We need a description input element field which is of type H HTML input element and we all need a people
input element field.
Now we can populate these fields here in the constructor with this tightly input element which has set
equal to this element.
So to our form element always keep in mind.
That's the form element here query selector and then query for the title element and if we again have
a look at index H CML we see in there we got the I.D. title on this element.
So we can query for that.
So an apt yes here to query selector we can use hashtag title to select 40 title I.D. element and stored
at entitled input element.
Now as you know just as with document get element by I.D. type has no chance of understanding that the
query selector is going to return input element here.
So to tell typescript I will again use costing and cost us to an input element and then we can repeat
the step twice and also assigned a description input element and the people input element look up the
appropriate I.D. in the index H2 file which are surprisingly a guest description and people and add
them to typescript.
So here we're searching for the description I.D. element and here for people and with that we got access
to all these elements inside of our class here.
We're inside of every object that is created based on the class.
Now we just need to add a listener to our element to our form for it at all.
Add another private method configure which you don't have to add.
But again I want to keep that separation where we basically do the selection and rough setup in the
constructor and then the insertion or defined tuning in separate methods and in the configure method
my idea is to setup an event listener.
So here we can reach out to this element which is to form and add an event listener Nelson's typescript
knows that element is a H2O form element it actually offers us auto completion when we want to listen
to the submit event here which is great.
Now we just need to bind this to a method and for that I'll add another private method private because
I'm never going to access this from outside of the class only from inside which no names submit handler
name is totally up to you.
This should be a method which receives an event object though because we'll bind it to this event listener.
So here we can point at this submit handler now we just need to make sure that before we attach I also
call configure and execute this private method.
Again it's private.
So from inside the class we can of course reach it from outside we would get a typescript error.
So now this method should trigger whenever the form is submitted in the submit handler.
I for want to get access to my different input values here and validate them.
And then of course do something with the inputs.
No we'll worry about the do something part later for now let's just get access to them for this first
of all.
I will call event prevent default to prevent the default form submission which would trigger an HBP
request to be sent.
Which I don't want here.
And then just to see where this works let's print console lock this title input element value to print
what's currently in the title input element if we save that you see it compiles with no errors.
So that's looking good.
And if we now go to the console here and enter Halo and click Add project good is that it didn't get
submitted.
Bad is that we get an error cannot read property value of undefined what's going wrong here.
The problem here is that this year the this keyword in submit handler does not point at the CLOs actually.
Why.
Well because of the way javascript and types of the works we bind the method here to the event listener.
And when we bind something to an event or with the help of an event listener then that's something.
So that method which is going to get executed will have this bound to something else in this case to
the current target of the event.
So this ends up this method will not point at the class when the method is triggered upon an event with
an event listener.
Now the work around or the solution is to actually call blind here on submit handler to pre configure
how it is function is going to execute when it executes in the future.
And the first argument we can pass to bind then is actually what the this keyword will refer to incite
off to to be executed function.
And here I pass this.
Which means this inside of subnet handler will refer to the same thing as this refers to in this context.
And since we call it in the context of configure here which we call with this configure this inside
of configure will refer to the class.
And thanks to bind it will therefore also refer to the class instead of to submit handler so if we now
save this year and we reload and then enter a helo here you now see hallow gets printed here when we
submit the form.
So now it is is solved and now we're dealing with this properly.
But maybe there is is a better way or an alternative way we all learn about maybe one using decorators.
So here's your chance to again posties and try solving this binding with decorators because that's something
we did learn about in the decorators section.