All language subtitles for 018 Retrieving Form Values_en

In the last section, we were able to trigger some validation on our form state object any time user

pressed the summit button, now that we are actually pulling off this validation, we need to make sure

that once our form is valid, we actually have the ability to extract the values that a user has entered

into these two inputs.

So, for example, if I enter in an email and then click on submit, OK, well, it's great that I validated

this, but now I need to actually reach into this field and get the value out of there so I can submit

it to a server or, I don't know, print it out, do whatever I want to do with the actual value.

So let's take a look at the documentation again and get a better idea of how we can pull a value out

of a field.

OK, so I'm going to, again, look at my form state class, so down here under the method section.

I'm going to find my save method right here, so the save method is what we're going to use to attempt

to look at every different field that is nested within this form and somehow pull a value out of it.

Now, the downside to the save method is that it has the same issue that the validate function does

and kind of a lack of documentation.

So it says that it saves every form fields.

OK, what's that mean?

What does it mean to save a form field?

Well, let's take a look at a diagram.

It's going to give you a better idea of what the save method does for us.

OK, so very similar diagram to what we had before, we have our form states we were calling previously

the validate function and that found all the different text form fields that were nested underneath

this form.

So now we're saying that we've got this save thing.

So any time we call the save method, a very similar process is going to occur as validate.

So when we call save the form state is going to find every text form fields that is nested underneath

this form.

So it's going to find that one.

And it's going to find that one.

And I'm going to change the color on this just to make a little bit more visible and then on each of

these text form fields.

The former state object is going to look and see if we have passed in a named property to the constructor

of the text form field called on saved on saved is going to be a function that gets invoked with the

current value of the text form field.

So just about identical to how the validator worked as well.

When we call Save, find the text Renfield's, find the answer functions tied to each one and invoke

them with the current value of the inputs.

So inside of that function is where we're going to have the opportunity to take the current value of

the form field and submit it or do something useful with it, essentially.

OK, so let's flip back over to our editor and we're going to first begin by adding on these on safe

properties to both of our text form fields.

Yes, I'm going to first find my email field.

And underneath my validator, I'm going to add on unsaved.

So this is going to be a function that gets called with the current value.

Of this field, it's going to be a tight string because, again, it is a text field and we'll refer

to that argument as simply value.

And then inside of here for right now, we'll just print out that value and make sure that we're actually

getting the email out of the field.

Then I'm going to scroll down to my password fields and I'll do the same exact thing.

So underneath the validator name property allowed in on saved.

Assign a function to it that's going to be called with a string that we will refer to as value and I'll

just print out value.

I forgot my karma on that one.

Don't forget the comma after the on save function.

All right, so now the last thing we have to do is actually call save on our form state objects.

So down again inside of Simit button.

Here's our unpressed function right now.

We're just trying to validate the form, but now we want to validate the form.

And if it is valid, then we want to attempt to call save on the form state.

So in order to only call save, if the form is valid, I'm going to first remove the print statements

we've got in here.

I'm going to remove the semicolon at the end of the line and I'm going to wrap the validate call inside

of a if statement like so.

So now think about what's going to happen here whenever a user presses on, the button on press gets

invoked.

We're going to look at every field inside this form and we're going to attempt to validate it, if every

form is valid, then the validate function will return.

True.

So we will enter into the body of the if statements.

But if any value or any field is invalid, then the validate function is going to return false and we're

going to skip over the statement entirely.

So now inside of here is going to be the perfect location for you and I to call save on the form state

object and attempt to print out the password.

And the email.

So now inside of our if statement will do form key current state.

So again, this is our reference to our form state object and I'll call save on it.

All right, time to test.

Let's do this.

I'm going to do a full refresh.

Wait just a minute for that to go, and now I'm going to enter in some e-mail that is valid, so it

needs to have the at Symbol and I'll put in at least four characters here and I'll click on Submit.

Now, present the form is valid, so I successfully see my email and password printed out inside the

terminal.

But.

If I make either of these fields invalid, it's now password only has one character, so that's not

valid.

And I click submit again, I don't see a console over here because the form is valid and it should not

be saved.

If I again add in enough characters and click on submit again, I'll see the council log over here again

or the print statement, not console.

All right.

So we've got our values through the use of these on saved things.

Now, it's definitely great that we're printing out the values, but we still don't really have the

ability to kind of take both the email and the password and kind of combine them together and like send

them off to some remote API or something like that.

So we still have a tiny bit of work to do.

Let's take a quick pause and finish this thing up in the next section.