Form Validation

[00:00:00]
>> Alex Okrushko: So let's add a few more cool things here that we have. So we have the required for title. Let's add a few more things. We can add even the debounce here. So debounce, and this was added just before the 21 was released, and you can see there's our RTSDebounce as well, but we're going to use, make sure that we use the forms debounce.

[00:00:30]
So what does debounce do? It debounces the update of the signal itself, so you change the field value in the form, but the model that we have under the hood, this event data, is not updated until this debounce time expires, right? So we are debouncing the events, and this is useful when you, when the user, for example, is looking for like entering a location with a specific city, and you have an API under the hood that can pull all the locations possible, right?

[00:01:08]
So you don't want to do it for every single character press. You want to user enter something, wait 300 milliseconds, or in this case, we're waiting for a second. Right, so let me just edit here. So our, so this is again, some of the examples are very much contrived, just want to show you some of the APIs that we have here.

[00:01:35]
So the root description is not updated instantly, it's updated after 1 second. Very powerful thing. So that's another one, then we can do also dependencies across different fields, for example, I, again, this is contrived example, but I want to disable my description field until I'm getting something in the title.

[00:02:07]
I want to make sure the title is there first, and only then you can enter the description. For example, I can set the dependencies here, so I say disabled, but now I'm providing a callback for this. And in the callback, I'm saying, hey, I can inject the value of. Way so this value of is a way for me to read the data within this callback function of another field, so I can say, hey, in this case, if the value of root title, right, if it's not there.

[00:02:54]
If it's empty, then description is disabled, so we can cross dependent different form fields in a very easy way. I think it's, you know, can't be easier than that. So this is the disabled. So our description can also require a description, root description is required and we give the message for this as well, saying hey, oh, yes, description, description is required.

[00:03:37]
Required. Moreover, we can say that the min length of this description has to be at least 10 characters. So I can say, see the min length. And it can again be a number or a logic function that I just demonstrated. In this case, we'll say, hey, that just the number is OK, and this, in this error case, we'll have the message that description must be at least 10 characters.

[00:04:29]
So what else can we do here? So, let me just do the typical required dates. Route date. And again message of date is required and then required location. All right. Location again. Message location is required. Location is required. And again, we do not have to touch anything in the template in terms of required, the min length, or any of those attributes, we don't need to set.

[00:05:20]
Really cool stuff. It automatically saves, so it's still accessibility friendly, it's not just checking that the values there, it's truly setting it, the attributes for this. There's other things as well, there's, and again, debounce was just introduced, there are other validations, there's, you can write your own custom validator functions, you can have even the custom async validator functions.

[00:05:56]
Right, so you can, I think it's like validate async, right, validate async, and you can say, hey, for this root, for this description, you can have, oops. Async validator options function. What else could be done? For example, async validate in the, this new forms API. This is the types. Let's find the usage. Angular signal.

[00:06:36]
Forms. Forms of signals, yeah, go. So you can do emails, min max, min lens, max lens, even have custom patterns, right, so, by the way, email is really powerful as well, you don't have to get their projects from somewhere, just use it built in and then the validate sync, validate. Async. OK, maybe it's not here. I think I've seen it here.

[00:07:08]
Update validate, valid I think should be here as well. Alright, can't find it right now, but again, it's one of the APIs. Again, very powerful, especially if you want to validate something with a backend immediately, before you allow the form to submit. So when you say immediately, is it automatically comparing the value that came off of the server at that point?

[00:07:34]
Yeah, so you can, you can call the server back and saying, for example, if you want to have a username that's not taken yet. Perfect. Exactly, so it'll just send this like, oh, you can't do this, it's a, there'll be some delay, of course, and then, but you can, you can say that the form is not valid still, so the form invalid would be triggered, so you won't, you won't be able to submit it until it validation completes, sync.

[00:07:59]
Yes, it's really powerful. In our case, there's no async validation, but, yeah, it's also available, really, really powerful.