Create a Form Model

[00:00:00]
>> Alex Okrushko: In module 2, we looked at the HTTP resource. That feature is still marked, and again, as of Angular 21, that feature is marked experimental, meaning you can try to use it in your production applications and again feel free to, but there could be some changes. Usually there's very few API changes, most likely it typically is there's some corner cases when this is used in some other interesting ways that might have some issues, yet they want to make sure that all these cases are covered.

[00:00:40]
For example, some of the issues that I see could be when in Angular, you can dynamically create component. We're not going to cover it, but you can basically call it create component, and you can bind some inputs to it as well and some outputs that do dynamic stuff based on, I don't know, configuration that you get from the back end, dynamically create UI very powerful thing in specific applications.

[00:01:10]
And this is where, you know, maybe the HTTP resource might not work on specific things, so that's why it's still experimental, they want to make sure that all the cases are covered. APIs can change sometimes as well, but most likely it's like stable, right? So that's why it's experimental. Signal forms is even probably more experimental. It was just added as experimental feature with Angular 21, but this is a new way to work with forms in Angular.

[00:01:47]
If you've seen Mark Texson's Angular fundamentals course from Frontend Masters, he was showing how to work with template-driven forms and reactive forms, and both are good approaches, there's some pros and cons. The signal forms is a replacement for them, and it's the approach that they're taking is quite fundamentally different. I'm going to see it right now as well.

[00:02:21]
I really like this new approach. There was a lot of thought put into how these things are structured, how they interact with each other, how do we have different form controls within the form, and things like that. All right, so let's dive into the signal forms. So let's see how we can work with this. So the form that we have is basically our create new event, it's a form, right?

[00:02:51]
We submit the new things, title, date, and we're going to add a few more things, so just the basic scaffolding. So let's go into our event details page. No, this is event details, so this is a feature in the admin space, create event. This is where we'll have our form for the most part. So before we get into the event service and other things, let's just first create something that's called event data.

[00:03:35]
And event data would be basically the backbone of our form. This is a signal which would have the create event form. For that, what is the create event form? It's very much the same as our DevFest event, but we don't have an ID for this. So let's just create a quick interface for this. So this is the create event form, and it basically is what the DevFest event is, right, but the DevFest event has also ID.

[00:04:16]
When we're creating the form, we don't have any ID yet. Once we create it, we'll have an ID or we can pretend that we have one and pass one, but for now it's like, hey, we're just going to use TypeScript and say in this object, omit ID and then basically creative and form is the rest, but without the ID. So this signal would be of that create event form, and it's very nice to kind of tie them together.

[00:04:52]
By the way, you could have duplicated all the fields and it works, but then the idea is like to show the connection between them. All right, so we have this signal, and then we'll give it the initial data as well. We'll file, we'll say that title is empty by default, our description is empty by default. Our date, we can create the new date immediately, or we can add the date when we actually click, oh but there, yeah, this is the date, not when we created the event, but when the date would be scheduled for, so we'll just default for now, for example.

[00:05:46]
So to ISO string and we'll, should we stop string slice also works. We'll just say from. We'll strip the time zone information out of it. And then, and by the way, see it's right away, it's highlighting that hey, it's still not have all the properties that we need. And let's add those properties, location. By default, I'll say empty. Speakers, and this is another cool thing we're going to see today, how to work with the dynamic arrays.

[00:06:22]
And then image. Again, in order to save time, I don't have like the drag and drop image upload, this, where do we save the image, our database is basically JSON. So in order to save all that, I'm going to just pretend that the event 4 is the image for new events, .png, which I already have, say. I'm going to show some cool things with images in the advanced course, but especially on optimizations.

[00:06:58]
Right now, we just say that this is the image in our public, that's event 4 or 5, whatever you want to do. It's what we're going to use by default when we create the event.