1
00:00:00,620 --> 00:00:04,970
The last thing that we need to do inside of our component is make sure that we get our text to show

2
00:00:04,970 --> 00:00:09,560
up as red and the outline of our input to show up as read as well.

3
00:00:09,560 --> 00:00:15,050
Now just to get these things to show up as red will be making use of a little bit of built in CSSA that

4
00:00:15,050 --> 00:00:18,320
is included with bootstrap inside of our starter project.

5
00:00:18,500 --> 00:00:23,780
So effectively to get these things to turn up as read all we have to do is get the appropriate class

6
00:00:23,780 --> 00:00:31,520
names on the fields that are generating the input and the text so effectively back inside of our code

7
00:00:31,520 --> 00:00:32,180
editor.

8
00:00:32,180 --> 00:00:34,200
I'm going to find the render field function.

9
00:00:34,230 --> 00:00:39,000
I'm going to find the wrapping div that has a class name of form group.

10
00:00:39,050 --> 00:00:44,810
So if we just apply a class name of has danger to this thing we should get the correct styling that

11
00:00:44,810 --> 00:00:45,850
we're looking for.

12
00:00:46,060 --> 00:00:46,700
So let's take a look.

13
00:00:46,700 --> 00:00:51,290
If I just hardcoded on here and we say it's always going to show a has danger.

14
00:00:51,290 --> 00:00:55,460
And then I flip back over to the browser call.

15
00:00:55,490 --> 00:01:01,700
We get the outline to appear as read and then to get the text to appear as read we can add in a div

16
00:01:02,060 --> 00:01:04,230
around the error message down here.

17
00:01:04,490 --> 00:01:13,130
So I'm going to put on a little div and I'm going to give it the class name of text Dasch help text

18
00:01:13,130 --> 00:01:16,340
hash help is going to work along with the has danger rule.

19
00:01:16,350 --> 00:01:20,190
Right above it to make sure that this text appears as read.

20
00:01:20,240 --> 00:01:24,910
Now if we flip back over and refresh and then touch each one.

21
00:01:25,120 --> 00:01:25,900
Yeah there we go.

22
00:01:25,930 --> 00:01:29,480
So now these things are hard coded as always being read.

23
00:01:29,950 --> 00:01:35,860
So it's OK if we leave the text here as read 100 percent of the time because if there is no error this

24
00:01:35,860 --> 00:01:39,390
text isn't valid or you mean the text is not visible at all.

25
00:01:39,700 --> 00:01:45,130
So really what we need to do is make sure that we only show the input as read where we only apply that

26
00:01:45,130 --> 00:01:49,510
class name of has danger when the field is not valid.

27
00:01:49,790 --> 00:01:52,630
So I want to expand on that last point just a little bit.

28
00:01:52,630 --> 00:01:58,670
When exactly do we want to apply the class name of has danger in the past.

29
00:01:58,690 --> 00:02:03,810
We were saying OK well if the user has touched it then we will show an error message.

30
00:02:04,030 --> 00:02:08,290
But this time around we really only want to apply this class name right here.

31
00:02:08,290 --> 00:02:14,460
If the user has both touched the field and there is an air present.

32
00:02:14,460 --> 00:02:18,670
So I think that we can probably use a tertiary expression again for generating this class name right

33
00:02:18,670 --> 00:02:19,050
here.

34
00:02:19,210 --> 00:02:23,470
But this time the Turner expression is going to look just a little bit different because we want to

35
00:02:23,470 --> 00:02:28,590
make sure that the user has both touched it and an error message exists.

36
00:02:28,590 --> 00:02:35,450
Ok so with that preamble out of the way rather than putting the entire class name directly in here inside

37
00:02:35,460 --> 00:02:41,520
the div in the GSX I think it would be really nice just for code organization if we generated the class

38
00:02:41,520 --> 00:02:42,590
name right above it.

39
00:02:42,900 --> 00:02:47,630
So let's say class name and we're going to use a template string here again.

40
00:02:47,670 --> 00:02:58,680
So I'll use my back Tick's will say that it always needs to be a form group and then we'll use our string

41
00:02:58,710 --> 00:03:03,090
template right here so make sure you get the dollar sign in the curly brace and then inside of there

42
00:03:03,150 --> 00:03:05,430
will place our Turner expression.

43
00:03:05,430 --> 00:03:17,190
So if field don't meddle don't touch and feel dot net or dot air then we'll use a class name of has

44
00:03:17,340 --> 00:03:23,520
danger otherwise empty string for this expression right here.

45
00:03:23,540 --> 00:03:26,430
So this is a rather long little segment right here.

46
00:03:26,450 --> 00:03:30,100
We could probably clean it up by using just a little bit of destructuring.

47
00:03:30,710 --> 00:03:34,210
Let's do that just to make everything appear a little bit nicer.

48
00:03:34,220 --> 00:03:40,400
So right above we'll just restructure off the property so we can drop fields from right here right here

49
00:03:40,550 --> 00:03:41,780
right here and right here.

50
00:03:41,780 --> 00:03:55,650
So we'll grab Mehta from field and now we can clean up the first field the second field number three

51
00:03:57,240 --> 00:03:59,850
and number four as well.

52
00:04:00,030 --> 00:04:06,830
Now we could also structure the touched in air properties off of the mega object as well.

53
00:04:06,900 --> 00:04:12,600
So we can use destructuring not only to pull off the first value or the first property off of an object

54
00:04:12,870 --> 00:04:17,140
but we can also use destructuring to access nested properties as well.

55
00:04:17,310 --> 00:04:19,650
So I think this would probably be a good place to use that.

56
00:04:19,650 --> 00:04:25,500
So let's go one step further and we're going to say off of the metal object that we are destructuring

57
00:04:25,500 --> 00:04:26,620
off of field.

58
00:04:26,760 --> 00:04:32,740
I also want to structure touch and air like so.

59
00:04:32,810 --> 00:04:37,130
So if you look at the syntax right here this is a little bit of a side into 6 by the way which we're

60
00:04:37,130 --> 00:04:38,460
talking about right now.

61
00:04:38,660 --> 00:04:45,500
This might look like it would be expanded to be a object like touch touch.

62
00:04:45,500 --> 00:04:49,070
Right because we've used this syntax several times throughout this course we've said well you have the

63
00:04:49,070 --> 00:04:50,660
key and the value are the same.

64
00:04:50,660 --> 00:04:58,320
You can just condense down to be like so in this case when we're using this compacted syntax with destructuring.

65
00:04:58,430 --> 00:05:00,770
This does not get expanded into an object.

66
00:05:00,770 --> 00:05:07,880
It is just used for structuring to pull off the properties touched and air from the meta object.

67
00:05:07,880 --> 00:05:14,860
So again this is how we use destructuring to access properties on nested objects so that refactor.

68
00:05:14,900 --> 00:05:24,690
Now we can go to be in just touched and air and then inside of the div down here we can be just touched

69
00:05:25,860 --> 00:05:28,390
and there like so.

70
00:05:28,450 --> 00:05:34,110
OK I think that looks much better with that little bit of E-6 refactor glass so we have to do is make

71
00:05:34,110 --> 00:05:36,750
sure that we apply this class name to our div.

72
00:05:37,020 --> 00:05:43,660
So I will replace the hardcoded class name with the class name variable like so.

73
00:05:45,940 --> 00:05:47,710
I think that we're ready for a test.

74
00:05:47,960 --> 00:05:49,910
Let's flip back over to the browser.

75
00:05:50,270 --> 00:05:54,460
So when everything first renders I expect to see absolutely no error messages.

76
00:05:54,480 --> 00:05:56,080
Yup that looks good.

77
00:05:56,090 --> 00:06:03,890
Now if I select or focus an input and I put in no text and focus another one the entire thing turns

78
00:06:03,890 --> 00:06:04,330
red.

79
00:06:04,400 --> 00:06:10,580
Ok that looks good but if I go back into that input and enter in some text everything goes back to saying

80
00:06:10,610 --> 00:06:13,520
OK that looks like valid input.

81
00:06:13,520 --> 00:06:15,060
You also notice that now.

82
00:06:15,230 --> 00:06:20,060
Now the user has kind of no mess messing around with this and put a little bit like they've put some

83
00:06:20,060 --> 00:06:20,980
text in here.

84
00:06:21,140 --> 00:06:27,590
Now they will instantaneously get input or feedback the instant they start changing this thing around.

85
00:06:27,920 --> 00:06:32,000
So in practice form renders pristine everybody's happy.

86
00:06:32,000 --> 00:06:33,890
But as soon as you start messing around with it.

87
00:06:33,920 --> 00:06:38,090
OK we're going to start being pretty aggressive in showing you some validation messages.

88
00:06:39,700 --> 00:06:40,440
All right.

89
00:06:40,480 --> 00:06:43,480
So I think that's about it for our form.

90
00:06:43,480 --> 00:06:46,000
Everything is looking pretty darn good so far.

91
00:06:46,000 --> 00:06:50,710
I think the last thing that we have to do inside of this is make sure that whenever we click the submit

92
00:06:50,710 --> 00:06:55,630
button back here or down here at the bottom we actually submit this to our back end API.

93
00:06:55,870 --> 00:07:00,550
We also need to make sure that we show a cancel button on here that the user can click to go back to

94
00:07:00,550 --> 00:07:02,090
our list of posts.

95
00:07:02,110 --> 00:07:05,750
So let's take care of both of those challenges in the next section.