1
00:00:00,120 --> 00:00:03,960
In this lecture, we are going to ask the input for the phone number.

2
00:00:04,170 --> 00:00:09,090
Currently, I'm on the documentation page for the Energy X mask package.

3
00:00:09,390 --> 00:00:14,160
We should take the time to understand how we can mask an input on this page.

4
00:00:14,370 --> 00:00:17,730
There's a table under a section called Special Characters.

5
00:00:20,240 --> 00:00:25,160
This table will give us a list of special characters we can add to the user's input.

6
00:00:25,490 --> 00:00:30,680
For example, if we add the Dash character, a dash will be added to the input.

7
00:00:30,950 --> 00:00:32,299
It's as simple as that.

8
00:00:32,570 --> 00:00:35,840
We're allowed to add any of these characters to the mask.

9
00:00:36,050 --> 00:00:37,970
Let's scroll down a little further.

10
00:00:38,540 --> 00:00:40,430
We will come across another table.

11
00:00:40,700 --> 00:00:43,250
The value of the input can be constrained.

12
00:00:43,460 --> 00:00:45,350
Let's say we want four numbers.

13
00:00:45,530 --> 00:00:47,150
We could add four zeros.

14
00:00:47,420 --> 00:00:51,290
The user will not be able to input alphabetic characters.

15
00:00:51,650 --> 00:00:58,970
The masking library will prevent that additional values will be prevented as well as you can probably

16
00:00:58,970 --> 00:00:59,900
already guess.

17
00:01:00,080 --> 00:01:06,260
We will be using a combination of special characters and constraints to help the user input their phone

18
00:01:06,260 --> 00:01:06,710
number.

19
00:01:07,190 --> 00:01:10,220
Open the register template file in your editor.

20
00:01:12,740 --> 00:01:18,980
Search for the phone, no input, it's sure to have a comment above it that says phone number, we will

21
00:01:18,980 --> 00:01:22,760
replace the input element with the app input component.

22
00:01:25,330 --> 00:01:31,570
Let's work on finding the other properties before working on the format, buying the control property

23
00:01:31,570 --> 00:01:33,370
to the phone number of property.

24
00:01:35,880 --> 00:01:41,490
Next, we will set the placeholder property to the following message enter a phone number.

25
00:01:43,880 --> 00:01:46,760
Lastly, we will add the format property.

26
00:01:49,320 --> 00:01:52,950
This property is where we can add the masking to our input.

27
00:01:53,190 --> 00:01:55,980
We will add the following left parentheses.

28
00:01:56,130 --> 00:01:58,620
Zero zero zero right parentheses.

29
00:01:58,830 --> 00:02:02,250
Zero zero zero dash zero zero zero zero.

30
00:02:05,030 --> 00:02:07,460
Phone numbers can vary from country to country.

31
00:02:07,670 --> 00:02:12,530
In America, the first three digits of a phone number are wrapped with parentheses.

32
00:02:12,860 --> 00:02:17,690
The next three digits have a dash after them after the Dash character.

33
00:02:17,870 --> 00:02:19,460
There are four more digits.

34
00:02:19,790 --> 00:02:24,350
Feel free to modify the format to your respective countries format.

35
00:02:24,890 --> 00:02:31,700
The Entry X Mask Library will allow the user to input up to 10 digits in the phone number of fields.

36
00:02:32,150 --> 00:02:36,050
They won't have to add in the parentheses or dashes in their input.

37
00:02:36,410 --> 00:02:38,450
They'll automatically be added in.

38
00:02:38,840 --> 00:02:41,570
The result is the power of input masking.

39
00:02:41,900 --> 00:02:44,990
Before we test our input, let's add a validator.

40
00:02:45,320 --> 00:02:49,100
The Energy X mask package doesn't validate the input.

41
00:02:49,460 --> 00:02:55,160
This step still needs to be handled by US Open the register component class file.

42
00:02:57,670 --> 00:03:02,260
On the phone, no form control, we will add an array of validators.

43
00:03:04,650 --> 00:03:06,900
We are going to add three validators.

44
00:03:07,110 --> 00:03:11,340
There will be the following required minimum length, maximum length.

45
00:03:13,810 --> 00:03:19,570
The minimum length and maximum length validators will have a length of 13 characters.

46
00:03:19,900 --> 00:03:23,770
We are counting the 10 digits along with these special characters.

47
00:03:24,190 --> 00:03:28,420
The value for the phone number should be constrained to 13 characters.

48
00:03:28,660 --> 00:03:30,580
Let's try testing our input.

49
00:03:33,210 --> 00:03:37,230
On the field for the phone number, we can input a range of numbers.

50
00:03:37,530 --> 00:03:39,120
They'll be completely valid.

51
00:03:39,360 --> 00:03:45,630
However, if we attempt to input more than 10 numbers, the masking library will not allow us.

52
00:03:45,930 --> 00:03:50,430
The same behavior occurs when we try writing alphabetic characters.

53
00:03:50,760 --> 00:03:53,460
This is the exact behavior we were looking for.

54
00:03:54,030 --> 00:03:55,890
However, there is one problem.

55
00:03:56,160 --> 00:03:59,490
If we move away from the input, an error appears.

56
00:04:00,090 --> 00:04:03,900
It tells us the length of the phone number is 10 characters long.

57
00:04:04,230 --> 00:04:07,860
If we count the number of characters in the input, there's 13.

58
00:04:08,100 --> 00:04:09,270
So what's wrong?

59
00:04:09,630 --> 00:04:13,920
Discovering the issue will require opening the angular developer tools.

60
00:04:16,410 --> 00:04:20,310
Under the components section, search for the register component.

61
00:04:22,850 --> 00:04:27,830
On this component, we registered the form controls for the registration fields.

62
00:04:28,370 --> 00:04:31,100
Let's take a look inside the phone number.

63
00:04:31,130 --> 00:04:36,200
Form control One of the properties inside this object is called value.

64
00:04:36,530 --> 00:04:43,430
It stores the value of the input looking closely at storing the phone number without the special characters.

65
00:04:43,910 --> 00:04:50,720
By default, the Energy X Mask Library will remove special characters from the inputs value.

66
00:04:51,110 --> 00:04:54,350
If we want to keep the special characters which we do.

67
00:04:54,440 --> 00:04:56,990
We need to add a property to our input.

68
00:04:57,380 --> 00:04:59,450
Open the input template file.

69
00:05:02,060 --> 00:05:07,520
On the input element, we are going to buying a property called Drop Special Characters.

70
00:05:07,760 --> 00:05:09,920
Its value will be set to false.

71
00:05:12,440 --> 00:05:19,400
The Drop Special Characters property is an option for removing special characters from an input by default,

72
00:05:19,580 --> 00:05:24,500
this property is set to true special characters are removed from the input.

73
00:05:24,950 --> 00:05:29,150
Switching this property to false will allow the special characters to remain.

74
00:05:29,480 --> 00:05:33,170
This includes special characters we added in the format option.

75
00:05:33,470 --> 00:05:37,040
Let's give our input one more test in the browser.

76
00:05:37,070 --> 00:05:38,900
Try typing a new phone number.

77
00:05:41,430 --> 00:05:45,270
Next, check out the value in the angular developer tools.

78
00:05:47,700 --> 00:05:50,190
These special characters remain on the value.

79
00:05:50,430 --> 00:05:51,240
That's awesome.

80
00:05:51,420 --> 00:05:57,300
We've successfully implemented input masking, it's a feature for constraining user input.

81
00:05:57,630 --> 00:06:00,780
We will want to use input masking whenever possible.

82
00:06:01,050 --> 00:06:05,040
In the next lecture, we're going to start handling the form submission.