1
00:00:00,520 --> 00:00:05,590
In this lecture, we are going to design an input component to clean up our forms.

2
00:00:05,830 --> 00:00:08,680
We've got a functional input with validation.

3
00:00:09,010 --> 00:00:13,330
Everything works thanks to the reactive form system in angular.

4
00:00:13,570 --> 00:00:16,450
With that being said, our template looks ugly.

5
00:00:16,720 --> 00:00:19,510
So far, we've completed one input.

6
00:00:20,080 --> 00:00:23,440
We are going to perform validation on every input.

7
00:00:23,800 --> 00:00:30,190
Aside from updating the inputs in our template, we will be reusing some of the validator functions.

8
00:00:30,490 --> 00:00:35,950
For example, we are going to apply the required validator to every input.

9
00:00:36,370 --> 00:00:40,660
The same error message will need to get rendered for every input.

10
00:00:41,020 --> 00:00:44,880
As you can imagine, our template can quickly become cluttered.

11
00:00:46,090 --> 00:00:52,420
The best way to prevent that from happening is by creating a component, we will create a component

12
00:00:52,420 --> 00:00:55,180
for handling error messages for the input.

13
00:00:55,720 --> 00:01:02,110
It's not going to contain any business logic besides accepting input from a parent component.

14
00:01:02,410 --> 00:01:07,420
You may hear this type of component referred to as a presentational component.

15
00:01:08,110 --> 00:01:13,780
They are components that focus on the presentation of a component, i.e. that template.

16
00:01:14,140 --> 00:01:17,260
Our components are fed data and then present it.

17
00:01:17,620 --> 00:01:19,540
They can also emit events.

18
00:01:19,840 --> 00:01:24,070
We can think of our Atab component as a presentation component.

19
00:01:24,370 --> 00:01:28,330
It doesn't have any logic besides accepting input data.

20
00:01:30,960 --> 00:01:35,940
We are going to create a component for outputting the input and error messages.

21
00:01:36,270 --> 00:01:39,000
It's not going to care about updating the data.

22
00:01:39,300 --> 00:01:43,720
It's going to focus solely on presenting it in the command line.

23
00:01:43,770 --> 00:01:50,340
We will run the following command engaged see shared slash input.

24
00:01:52,960 --> 00:01:59,200
We are creating this component inside the shared module forms are very common in applications.

25
00:01:59,770 --> 00:02:05,110
It's likely we're going to reuse the input component in various areas of our app.

26
00:02:05,470 --> 00:02:12,730
Therefore, we are creating this component in the shared module to expose it to all areas of our app.

27
00:02:13,090 --> 00:02:14,560
Let's move the template.

28
00:02:14,800 --> 00:02:17,080
Open the register template file.

29
00:02:19,670 --> 00:02:26,780
We are going to cut the template for the name field, cut the input element and the two paragraph elements.

30
00:02:29,400 --> 00:02:32,310
Next, open the input template file.

31
00:02:34,910 --> 00:02:39,110
Replace the current template with the template from the register component.

32
00:02:41,610 --> 00:02:44,640
After doing so, we will receive some errors.

33
00:02:44,940 --> 00:02:50,010
The relationship between the input and its respective form control has been severed.

34
00:02:50,340 --> 00:02:55,800
The errors we're getting in our template will tell us it cannot find the form group or control.

35
00:02:56,220 --> 00:03:01,560
We can fix these errors by passing on the control to the component as input data.

36
00:03:02,160 --> 00:03:04,980
First, we need to export this component.

37
00:03:05,310 --> 00:03:10,440
The register component and input component are registered in different modules.

38
00:03:10,780 --> 00:03:12,810
Open the shared module file.

39
00:03:15,340 --> 00:03:20,080
Inside the exports option, we will and the input component class.

40
00:03:22,540 --> 00:03:24,880
We don't need to import this component.

41
00:03:25,150 --> 00:03:27,790
It's already been imported by the Seelye.

42
00:03:28,150 --> 00:03:31,780
We can start using our component in the register component.

43
00:03:32,140 --> 00:03:37,060
Switch back to the registered template under the label for the name field.

44
00:03:37,210 --> 00:03:39,850
We will add the app input element.

45
00:03:42,490 --> 00:03:46,630
After loading the component, we need to start sending down data.

46
00:03:46,960 --> 00:03:49,930
We will handle this step in the next lecture.