Form Schema & Field Binding

[00:00:00]
>> Alex Okrushko: So this signal is driving the form now. The entire form is based on this signal. All right, so let's go and create this form and schema for this. So we'll create a read-only form, and the way we create the form is we're going to call the form function that is coming from Angular forms, so we'll import this from Angular forms signals.

[00:00:55]
So that's where the form lives. We'll create the form and form is a function that takes the signal that it'll be working with. It's the first argument, so this will be this event data and then it could be done right. We could be done, but we want to also provide some additional schema for this form. And what I mean by that, let me show you the examples, so root is the root of that schema, so the schema path tree.

[00:01:42]
What we can do here is we can say we can use special functions. This is what you were just referring to, so we can say that we can have some required fields, and which field do you want to have required, for example, the root title, the title, and the IntelliSense completes, it knows what we have, it knows what we're working with through the signals, right?

[00:02:14]
So we can say that our root title must be required, and moreover, we can provide even further options. I think it has some messages by default, but we can also say, hey, we can add the message for the error if the title is not there. We can say title is required. Right, so notice, no, this is just no comma here.

[00:02:52]
So the cool part here, and let's connect the title here, title. Here, what do we have the title? Event title here. I just quickly jump in. I'm going to paste it a little bit, but there you go, this is the input for our title, input for our title, placeholder and demand title, this is a label, this is our input.

[00:03:27]
So I'm going to add the field, and this will be form title field, again, as a custom directive, just like we've seen before, we do need to provide the import for this. And this field is coming from Angular forms as well, right? So now this field is tied to this input. What is cool here is that we just declared that this title is required, but we didn't, oh, I have the import here, but we do not need to tell it here anymore.

[00:04:10]
We do not tell the template that it's required, we no longer need to have this required attribute and conditions or just are being required, we no longer need to do this because the field would know that it's needed based on the schema that we provided to the form. It's like, oh, using this form title, it's actually required.

[00:04:40]
And if we don't enter it here and if I leave it empty, oh, it will have the message. Let's add the message for it to show now for the error message. So what we can do here is in our input, we can say, hey, if this form title, again, when you do info, this, right, and for this form title is touched, means I already tried entering something, and this form title is invalid, then I want to display some kind of error message here.

[00:05:45]
So I can add some, again, p tag, p tag, that will be saying that this form title and then errors, right, because you could have multiple errors, they can stack on them, we'll just read the first one that we have, you can again, depending on your design, you can have multiple errors, for example, if you have a password that has to have, I don't know, one capital letter, one special character, one whatever, you can just say, hey, all these types of rules are required, and you can have multiple messages and list, have the for loop for these messages.

[00:06:25]
In our case, we'll just get the first one, and we'll show that message, error message, so if it's there, if it's invalid, we'll show this error message, all right, and just a little bit of tailwind stuff, so I'll just do the text red 500 and text on the smaller side and then just some margin around, there you go.

[00:06:58]
So see, title is required now, right? So it knows it's touched again, here nothing, once we touch, it knows that it's required. Now, all the data that we save here, all the data that was saved, I'll go Angular or create event page. Our event data here or signal. You see, where is it? It is all saved in our signal, so basically signal is the source of the data, the form just works around it before it updates the signal's is under the hood.

[00:07:46]
And again, this is a change, big mental change in how forms were working before, yes. You may have shown it, I may have missed it, but how does the API come into play to feed the each field in the signal form? Like each record. So how does API update each field? So it needs to update the entire signal value as a whole right now.

[00:08:15]
So we have an object, it's part of the signal, see the signal here? It's not a signal of individual items, it's a signal of the entire object. Yes, and this is the create event object that we created. So signals can work with primitives, like we've so far been doing strings, numbers, whatever, but it can also work with objects.

[00:08:43]
The only difference is, if we need to access a specific property, we need to call the signal and wrap the object itself and then get into the property directly, right? So, for example, if we want to read the data of the read-only here, for example, title. This event data, we cannot just call title here, right, it won't work.

[00:09:12]
What would work is unwrap the signal first because that's a signal and then this is a title. So in that particular case, you'd get every title field in the set, or would you, yeah, you'd get every instance of title for that set? In where, in which case? In that read-only variable you just created. I'm getting whenever, whenever this object is updated, I'll get the new title back.

[00:09:43]
So that's a little disadvantage, there's again, a few workarounds, which again, basically, there are different ways to read it. Yes, can you go for that with the title dot set and change the, no, you'll have to change the entire object. So, but you can always do event data, where is it touching, sorry, where's it touching your JSON data?

[00:10:12]
Yeah, it doesn't touch it, so we didn't link it yet. OK, I'm missing that. Yes, yes, yes, so we're not persisting this data to our backend yet. We are right now, the form is working with changing the signal that we have as a local state within the component.