Handling Form Submission

[00:00:00]
>> Alex Okrushko: So, we have the form submission here, we'll submit the event. How can we, let's first create an API in our event service to submit the event. I have the API here for this. Component create. Yes, I do, yes, I do, here it is, so this is the example, in our event service. We have delete event, we have all these things, let's just create one for create event.

[00:00:37]
Create event and then we'll have an event. We can use the same interface, I'll just quickly here say that this is the DevFest without the ID. Technically, we can reuse the interfaces. And again, this is a very simple mutation operation. We'll just do very similar what we've done with the delete, but this will be the post, so this will be HTTP client that we're going to use and we'll say, hey, post this data.

[00:01:14]
And the return is the DevFest event, that's where the result is, to this API, and then this is the event I was going to post. Very straightforward, again, the returns is observable back. When it returns this observable back, that means we need to do something to subscribe to this, right? But the cool part here is, and I'm going to admit it in a second, I'm going to add it later, so let's first make sure that the form is valid, right?

[00:01:56]
So if this form is invalid. And valid. If this form is invalid, then we're going to just return and do nothing, right? It's probably invalid. Clicking it doesn't make sense, but it will also disable the button anyway. Now, what is the payload I want to send, I can extract that, for example, say hey, this is the payload of our form.

[00:02:20]
And the payload would be this event data, right, because our signal that tracks is the source of truth. All right, so once we have this, then we'll inject our service here, right? So we'll do the read only. Events service, which is a very typical inject event service, nothing new here. Events service. And then this event service.

[00:03:02]
I'm going to say, you know what, create the event. That's your payload. It's a vendetta. And we do need to subscribe. Why we're subscribing, if we don't subscribe, nothing will happen. So in this case, when everything's fine, I can say. Can alert that event created successfully, for example, and then we'll need to inject our router as well, so we'll do the programmatic navigation.

[00:03:48]
So we'll inject our router as well here. Inject router. Because we don't want to route immediately, we want to route only when they have successful event creation, so this router. Once we are successful, then we'll navigate. So that's a programmatic way, we've seen router link, that's clicking, that's programmatic navigation.

[00:04:23]
And we'll just go to home, right? On the error case. We'll just do console.error, for example, with that error. All right, so one thing I admitted here, and I want to show you why I have certain things here. So let's see what happens if we just do it now, looks like it should have been, should be working, right? Workshops, some description.

[00:04:56]
Script. Option and I'll have like online, for example, my location. Ah, this should satisfy if I create. What's happening. She has done some form submission. Doesn't really continue. What's happening? Do we have the event? That's probably the previous one. So we are using by default, if we don't do anything, DOM will catch the submit event, it'll do its own thing, right?

[00:05:31]
So we want to make sure that, whatever the form event handling logic is built in in the browser, we want to NOT do that, right? So in this case, we want to say, hey, prevent default behavior, so don't do what you typically do, don't send a form action, don't do any of this stuff, because I know what to do myself with this logic, and now this should help us work.

[00:06:09]
I'll see another. Workshop, say online, for example. And then let's create this one. Now it's created successfully, now it's executing our logic, and then it navigates back to the homepage. And now we have events, looks like our event thumbnail is broken, which is meaning that we don't have the correct IS because it should be images.

[00:06:35]
Right, the next will work. In HTTP resource, we have the possibility to listen to loading state. To loading status of a request, does Angular HTTP client also provide a way to listen to the request status during a POST request? So HTTP client by default does NOT provide that, the typical way things are done, and again, this is for, for example, creating or deleting event here, we could have the loading state here, for example, we can have private, is, is creating, for example, right?

[00:07:21]
Just to make it simple, is creating, which could be our signal of false to begin with, and we can actually NOT make it private, we can actually do it the read only, so we're exposing it outside of service. And anybody can read this data, but it's a read only for them. I mean, they cannot change the value here, but again, because we're exposing the signal, they could change the value, and then, what we can do here is before we, for example, do the post, we can say is creating set to true.

[00:08:11]
And then here, we'll have to use a little bit of observable pipe magic, and we can here do the finalize, which was brought up today, and then, and then this finalize. I can say, in this is creating. Set to false, this is, for example, if you want to have like a spinner or something that, hey, this event is still being created, you can then be listening for this creating, in fact, you can actually do it better, you can probably do private this guy, and then, and maybe call it is creating.

[00:08:57]
For example, we could probably do this, as it's creating like internal or something. Right, you can just say it's creating internal. And then expose only the computed value, read only is creating. This way, components cannot set the value. So they can only truly consume this. Right, so we're basically. And then nobody can set that from component, they can truly just read this data out, right?

[00:09:30]
So there's ways to do this, with this approach. I do encourage to watch the advanced Angular as well, we're going to dive into different techniques, especially related to state management, because this is basically state management. You can hand draw it all you want, no problem, right, that works. I'm going to show you some other techniques, how to do it in a more interesting way that it's encapsulated and reusable, repeatable, because right now I have to do it at every single service for every single API.

[00:10:19]
We can do a little bit better, but that's working. Good questions, thank you. Good questions, keep them coming, as I love all of them. All right, so let me just remove these things. All right. And this was some observable magic. Which, again, Angular teams trying to encourage to have the simplest path forward and add things that are a little bit more complex, if and when you need it.