All language subtitles for 12. Review on Property Binding6

Well our application is definitely working but I want you to notice the really awkward behavior.

If I refresh the page right now and then click on the Generate button nothing happens.

That's because I haven't entered in a length.

I also haven't selected any valid characters.

So just to kind of help guide our users I think that we should try to disable this button from being

clicked.

And so we have both a length and at least one of these character sets has been selected now in general

to actually disable a button.

Oh we have to do is add a disabled attribute to the button element.

Let me show you what I mean.

I'm gonna go back over to my component template and inside there I'll find the button elements right

here down towards the bottom if I just add in an attribute of disabled like so and then save this button

will be disabled on the screen and so would be kind of clear to our users that hey they need to do something

before they can click that.

But this is pretty much what we want but obviously we want to update that disabled attribute after a

user has entered in a link and checked on these things as well.

So in order to do so we're going to set up another property binding just like we've been doing on those

input elements.

Remember on the input element down here we've got a bound property.

This right here means take a look at the password property of our components.

Anytime that changes reassign that value to the value property of the input do we want to do the same

thing.

But this time we want to affect the disabled property of the button let's do this.

We will wrap it disabled property with those same kind of square brackets like so I'll then put in my

set of double quotes and remember whatever we put inside those double quotes is now going to be evaluated

as though it were javascript.

So just to get started let's first begin by only enabling the button after the user has entered in a

length they'll say not length like so.

So how does this work.

What would our application first boots up.

Length is equal to zero not zero is equal to true.

So we can imagine that like true would be stuck in right there.

That means yes do disable the button but having not length is going to work to make sure that we only

enable the button after the user has entered an actual length.

Property let's test this out really quickly.

I'll save this I'll flip back over now the button is disabled by default but if I enter in a link I

can see the Generate button lights right up okay.

So I'd say that definitely works.

Now let's add in some additional checks there to also look and make sure that we've got at least one

of these things checked OK.

Now this check heading into Boolean logic for this is going to be just a little bit more complicated.

So if you understand what's going on right here this is really all you need to understand the boolean

stuff they're about to add in is going to get a little bit nasty.

I just want to tell you right up front this line is give be a little bit long so I'm going to first

do a little bit of indentation here just to give myself some base to type.

Now I'm going to remove the knot length and I will replace it with not so exclamation and a set of parentheses.

And inside there I'll say length and another set of parentheses include letters or include symbols or

include numbers and I'll close off both the parentheses.

I'll zoom out for just a second so you can see that whole statement again this says Take a look and

make sure that at least one of include letters symbols or numbers is true and make sure that there is

a length entered and then take the opposite of all that to decide whether or not the button should be

disabled

OK.

So it's a test that I'll save this line of flip back over.

Now if I enter into length by itself.

No no good.

I have to also check one of these boxes once I do.

Now the Generate button lights up as soon as I uncheck one the black boxes the button the general button

goes away once again.

Now I can hit generate and I still see my random password all right.

So I'd say that's a pretty good improvement.

So I think this application looks pretty good right now.

The last big thing I think we should fix is the styling.

Right now the application is not ugly.

I think we should add in a little bit of styling just to make sure this thing looks a little bit better.

No quick pause and we'll start to add in some C Ss in just a moment.