OK, almost there.
Well, in terms of our form and this just go back to the tax code so that we can hook this back up to
be able to actually submit it and update our database and see activity form.
Let's just close the others to tidy things up at the top and we get a re-enable handle, submit function.
We don't need the handle change any more or less can go now.
And what we'll do is we'll just uncommented the handle submit.
And what we're going to do is we're going to take the activity here as a parameter so we'll pass in
activity instantly had to submit and we'll say activity.
And what we'll do actually, just to just to be a bit clearer, we'll say handle, form, submit will
change the name of this method.
And down in the formic properties where we've got our own submit method instead of consultant log,
the values will say handle, form, submit and pass in the values, which is going to be an activity.
The rest of this can stay the same, although what we'll do is just above the form itself is we'll just
add a header and we'll say header.
And we'll say the content equals activity.
Details.
And to make it a subedar and we'll give it a color equal to tell.
And will also place a never had an inside the form itself, just above the location details.
And we'll just paste this in here and we'll just say.
Remove activity, I would just say location.
Details.
What we also want to do is disable the submit button if the form is not dirty or the form is not valid,
or if the form is being submitted and we can get these props and pass them down to our form from formic.
So as well as the handle submit here, we'll check to see if the form is valid or is submitting or dirty.
And we can use these properties in our button here, so I'm just going to move things down a bit and
we'll add a disabled flag and we'll say this is disabled if is submitting.
Or not dirty.
Or not is valid.
And if we go and take a look at our fall now, we should find that everything is hooked back up to our
API.
So if I refresh this page and I'm editing an activity and that, say, past activity, one will change
it to past activity.
11, if we click submit, we should still get the loading flag and be taken to our activity and this
should be persisted in our database.
If I refresh this page, then we see past activity 11.
If I go back to the activities, then we can see that this has been updated everywhere.
Great.
And if I take a look at creating an activity, we can see the submit button is disabled and if I just
say test formic activity.
As the title and just say test and then pick a category and then pick a date and say 21st and 12 EPN.
And we'll just say test and test his location and venue, then the submit button becomes available.
If I remove any of these, then it becomes unavailable until I get it back in.
And one thing that we didn't test, actually, is what happens if we leave the date blank and we get
quite a nasty validation error there.
So let's put the date back in and just submit this to our API just to make sure that works.
And it does.
But what we'll do is we'll just go back to our form and where we've got the date validator, we'll actually
put a message in and we'll just say date is required.
So that we don't see the nasty full text that we saw there, and if we go back and we manage the events
and we take out the dates and click away, well, we get a different kind of validation error.
Aha.
Now, that's not quite what we're looking for.
And what we can do to get around this is just to just to follow the guidance here.
If nothing is intended as an empty value.
Be sure to mountain schema as nullable and especially purely because we've got the data as null here
and we're going to let this be nullable.
So what we'll do is we'll add a period and then we'll specify Nullable.
And then this is still going to be required, but we're not going to see the nasty long string of text.
And if we go back and take a look, let's just refresh the page, make sure the change has been picked
up.
And if we clear the date and we click away, then we get data is required and then we can select the
dates and the validation goes away and we can submit and everything's good in the world.
Now, let's take a look at our console.
We've come to the end of this particular section and we just want to remove any of these nasty warnings
before we commit our changes into source control and just in our activity form.
We've got a few warnings inside there.
So let's take a look.
And what we'll do, we'll just come up to the top, used a quick fix and delete all and use declarations.
And if we go back and refresh our page, we should get a nice, clean console and we do and we've now
implemented formic into our application.
So let's go back to the code and we'll save our changes into social control.
So let's just stage them and we'll say end of Section 11 command center and then we're just going to
push these on up to you.
Get up and we'll wrap this up with a summary.