1
00:00:00,050 --> 00:00:05,110
In this lecture, we are going to talk about input masking for the phone number field.

2
00:00:05,120 --> 00:00:08,570
It's likely you will need to format a fields value.

3
00:00:08,570 --> 00:00:13,940
For example, phone numbers have the first three numbers wrapped with parentheses.

4
00:00:13,970 --> 00:00:17,090
This formatting may vary from country to country.

5
00:00:17,090 --> 00:00:21,740
If we're asking for a phone number, we should receive it in the correct format.

6
00:00:21,740 --> 00:00:25,070
By default, browsers don't format values.

7
00:00:25,070 --> 00:00:28,040
Whatever we type into the input is what we get.

8
00:00:28,070 --> 00:00:31,670
We can't expect users to format a value correctly.

9
00:00:31,670 --> 00:00:36,350
They may make mistakes or have no idea how to format a phone number.

10
00:00:36,350 --> 00:00:41,390
If we want to force formatting, we could implement something called input masking.

11
00:00:41,390 --> 00:00:44,330
It's a technique for constraining user input.

12
00:00:44,360 --> 00:00:51,020
There are a great way to reduce confusion about why an input value may be incorrect, while also ensuring

13
00:00:51,020 --> 00:00:53,480
data is in the required format.

14
00:00:53,600 --> 00:01:00,540
We can use an input mask to deny the user from inputting alphabetic characters at the same time, we

15
00:01:00,540 --> 00:01:03,090
can assist them by formatting their input.

16
00:01:03,090 --> 00:01:06,720
Overall, it provides a better user experience.

17
00:01:06,720 --> 00:01:09,900
It will make more sense once we see an example.

18
00:01:09,900 --> 00:01:12,780
Input masking can be difficult to implement.

19
00:01:12,810 --> 00:01:15,390
It doesn't come out of the box from Angular.

20
00:01:15,420 --> 00:01:18,990
There are various ways to add input masking to an app.

21
00:01:18,990 --> 00:01:23,520
In my opinion, it's going to be so much faster to use a library.

22
00:01:23,520 --> 00:01:26,250
There are a lot of edge cases to consider.

23
00:01:26,280 --> 00:01:28,980
A library will suffice for this problem.

24
00:01:28,980 --> 00:01:35,400
In the resource section of this lecture, I provide a link to a library called NGS Mask.

25
00:01:35,430 --> 00:01:38,340
This plugin can help us with input masking.

26
00:01:38,340 --> 00:01:43,500
It's effortless to install and use open the command line in your editor.

27
00:01:45,520 --> 00:01:51,450
We will run the following command NPM install dnsmasq.

28
00:01:53,750 --> 00:02:00,590
The Mask Library conveniently exports a set of classes that can be registered with modules.

29
00:02:00,590 --> 00:02:03,950
It's a common practice found among most libraries.

30
00:02:03,980 --> 00:02:07,160
Let's think about where to import these classes.

31
00:02:07,190 --> 00:02:10,880
Input masking should be applied to the input component.

32
00:02:10,910 --> 00:02:14,770
The input component is declared under the shared module.

33
00:02:14,780 --> 00:02:20,290
Therefore we should import the Pnnx mask library into the shared module.

34
00:02:20,300 --> 00:02:24,080
Open this file in your editor at the top of the file.

35
00:02:24,080 --> 00:02:33,830
Import two declarations called provide environment, NG mask and Ng's mask directive from the Ng's mask

36
00:02:33,830 --> 00:02:34,700
package.

37
00:02:37,660 --> 00:02:40,480
Next scroll to the imports array.

38
00:02:40,510 --> 00:02:47,550
The mask package exports a directive we can use to apply to form elements to apply masking.

39
00:02:47,560 --> 00:02:51,280
This would be the mask directive class.

40
00:02:53,330 --> 00:02:54,200
Afterward.

41
00:02:54,200 --> 00:03:00,410
There are services available that are injectable that we may need inside the module configuration at

42
00:03:00,410 --> 00:03:02,390
an array called providers.

43
00:03:04,440 --> 00:03:09,240
Unlike components or directives, services from other packages can be registered.

44
00:03:09,240 --> 00:03:17,550
By adding them to this array, let's call the provide environment NG mask function to grab those services.

45
00:03:19,640 --> 00:03:22,400
We can move on to using the library.

46
00:03:22,430 --> 00:03:24,110
We're in a bit of a pickle.

47
00:03:24,140 --> 00:03:28,190
Before we can use this library, we need to consider the following.

48
00:03:28,220 --> 00:03:30,500
Does every input need masking?

49
00:03:30,530 --> 00:03:31,850
The answer is no.

50
00:03:31,880 --> 00:03:36,020
We should conditionally apply input masking to our inputs.

51
00:03:36,050 --> 00:03:40,730
We're outsourcing the input in a component for reusability reasons.

52
00:03:40,760 --> 00:03:46,640
Attributes applied to the input element will be used on every instance of this component.

53
00:03:46,670 --> 00:03:52,100
This can be problematic because we may not want input masking on every component.

54
00:03:52,220 --> 00:03:57,430
We should make input masking optional in the input component class.

55
00:03:57,440 --> 00:04:01,850
We should create a property for toggling input masking on the input.

56
00:04:01,880 --> 00:04:05,450
The property should be configured by the parent component.

57
00:04:05,480 --> 00:04:11,940
If the parent component does not pass down a value, we will assume input masking should be disabled.

58
00:04:11,960 --> 00:04:14,900
Open the input component class file.

59
00:04:15,320 --> 00:04:21,450
Inside the class we will create a property called format with the input decorator.

60
00:04:23,670 --> 00:04:24,750
Ahead of time.

61
00:04:24,750 --> 00:04:29,820
I know the input masking library will ask for a string for formatting the value.

62
00:04:29,850 --> 00:04:34,030
Therefore, the type of our property should be set to string.

63
00:04:34,050 --> 00:04:37,230
However, we want this property to be optional.

64
00:04:37,230 --> 00:04:43,020
We can prevent Dnsmasq from working by setting the value to an empty string.

65
00:04:45,190 --> 00:04:49,930
We've effectively turned off input masking unless we override the value.

66
00:04:49,960 --> 00:04:54,580
The next step is to apply masking to the input element in the template.

67
00:04:54,610 --> 00:04:57,100
Open the input template file.

68
00:04:59,190 --> 00:05:00,750
On the input element.

69
00:05:00,750 --> 00:05:04,800
We need to bind the mask directive to our format property.

70
00:05:06,770 --> 00:05:14,090
After registering the Pnnx Mask module, we can add the mask directive to enable input masking on an

71
00:05:14,090 --> 00:05:14,750
element.

72
00:05:14,780 --> 00:05:20,540
Luckily, this property won't affect our other inputs as long as the string is empty.

73
00:05:20,570 --> 00:05:24,510
Input masking will be applied to inputs that don't need them.

74
00:05:24,530 --> 00:05:26,900
The inputs will behave normally.

75
00:05:26,930 --> 00:05:31,580
Before going further, we should test if our input is still functional.

76
00:05:31,610 --> 00:05:33,560
Open the form in the browser.

77
00:05:35,670 --> 00:05:37,610
Everything works as before.

78
00:05:37,620 --> 00:05:40,110
We can type in any of the inputs.

79
00:05:40,110 --> 00:05:42,930
The same validation rules will get applied.

80
00:05:42,960 --> 00:05:45,180
This is precisely what we wanted.

81
00:05:45,210 --> 00:05:47,700
We've made input masking optional.

82
00:05:47,730 --> 00:05:50,430
Let's start working on the phone number field.

83
00:05:50,460 --> 00:05:53,490
We will begin this task in the next lecture.