WEBVTT

00:00.080 --> 00:00.960
Welcome back.

00:01.000 --> 00:11.080
If the user enters letters instead of numbers or he missed to enter some of the variables, the model

00:11.080 --> 00:13.280
will give us errors.

00:13.560 --> 00:19.280
In order to prevent this, I'm going to create a new Kotlin file.

00:19.320 --> 00:26.680
Name it as validation errors and this file contains a new composable.

00:26.960 --> 00:36.000
This composable is responsible for displaying the errors for the user and validate them.

00:36.160 --> 00:42.200
So validation or validate error takes a list of errors.

00:42.200 --> 00:47.320
It's of type string and this is a card.

00:47.400 --> 00:58.440
Set the modifier dot fill maximum width colors equals to card defaults, dot card colors and inside

00:58.440 --> 01:02.320
it set the container color to error container.

01:02.360 --> 01:07.880
We need to display the error and the error container with the same color.

01:07.920 --> 01:11.760
Okay, so we need to display errors for the user.

01:11.880 --> 01:18.880
If he missed any of the text fields or he entered the wrong format of input.

01:18.920 --> 01:22.740
Let me create a column and design this card.

01:22.780 --> 01:29.660
Set the padding 816 dpi and inside this column start creating the text.

01:29.660 --> 01:30.620
Composable.

01:30.660 --> 01:32.340
Please fix the following.

01:32.540 --> 01:36.700
We need title small color on error container.

01:36.740 --> 01:39.020
Set a spacer modifier.

01:39.060 --> 01:41.940
Modifier height ATP.

01:42.060 --> 01:51.700
Then create a for loop displaying all the errors inside the errors list passed as a parameter.

01:51.860 --> 01:58.340
So we're going to display a text for all errors inside the errors list.

01:58.340 --> 02:02.700
So here errors for each for each error.

02:02.940 --> 02:05.180
So let me name it like this.

02:05.340 --> 02:06.340
For each error.

02:06.380 --> 02:09.180
Go and create a text composable.

02:09.220 --> 02:14.500
Having the text parameter like this and display the name of the error.

02:14.580 --> 02:17.980
Set the style to body small.

02:18.340 --> 02:25.860
Let's make it like this and an error container and set the modifier to vertical to ADP.

02:25.900 --> 02:31.980
Okay so this is our validation errors composable function.

02:31.980 --> 02:35.180
And in this function we have the card.

02:35.220 --> 02:42.660
Inside this card we have column displaying a text for each error passed as a parameter.

02:42.820 --> 02:44.340
And this function.