#12.23 - Styling input element for validation errors - Template Driven Form - Angular Series
#12.23 - Styling input element for validation errors - Template Driven Form - Angular Series
This video demonstrates how to applying styling for validation errors on input text element. This is implemented using Control Status CSS Classes.
Playlist Link for this Angular Series - • Angular Tutorial - Learn the EASY way
Content
1.06 -> In the previous video we saw how Control Status
CSS Classes are dynamically included by the
8.2 -> NgModel directive.
9.99 -> Based on these classes, we can now apply styling
on the input text element for validation errors,
15.129 -> which will be demonstrated in this video.
19.609 -> Before going through this video, I highly
recommend to watch the previous video, which
24.619 -> demonstrates how Control Status CSS Classes
work.
30.34 -> I am opening 'app.component.css'.
34.13 -> Let me include the selector for the class
'ng-invalid' by prefixing it with a period.
42.07 -> For this class, I am including 'outline' property
with value as '0.1rem solid red'.
52.65 -> The outline is applied to whatever element
that contains the 'ng-invalid' class defined.
60.92 -> We already know that 'ng-invalid' class is
included by NgModel, when the field is invalid,
68.079 -> so our expectation is that this outline will
be applied when the field is invalid.
75.02 -> I am saving the file.
77.95 -> After the page reload, we can see outline
applied around the element and on the input
83.569 -> text element.
84.74 -> Let us examine the HTML content of the page
to see why it is applied around the input
91.88 -> text element.
94.249 -> I am maximizing the browser window, I am opening
Developer Tools, in the 'Elements' tab, let
101.541 -> me expand app-root and look into the 'class'
attribute of 'form' tag.
109.049 -> We can see that the ngModel directive includes
'ng-invalid' in the form tag as well, hence
117.639 -> styling has got applied to the form tag, which
is why we see the red outline around the form
124.209 -> element.
125.209 -> Let us see how we can fix this in 'app.component.css'.
132.64 -> Let me close the 'Developer Tools' and the
normalize the browser window.
137.95 -> Then in 'app.component.css', I am going to
prefix 'input' before the 'ng-invalid' class
144.81 -> definition.
147.15 -> This makes the style to be applied only to
the input text element that has the class
152.43 -> 'ng-invalid'.
155.28 -> I am saving the file.
157.51 -> Once the page reloads, we can see that the
form level outline is not visible and it is
162.75 -> applied only to the input text element.
166.83 -> The red outline is now directly shown even
if there is no validation error message, but
173.03 -> it is good to show it when the validation
error message is displayed.
178.69 -> In the selector, after 'ng-invalid', I am
including '.ng-touched'.
187.23 -> After this inclusion, the style will be applied
only to the input text element that has both
193.739 -> 'ng-invalid' and 'ng-touched' classes included.
199.69 -> I am saving the file.
202.19 -> After the page reload, we now don't see the
red outline.
206.42 -> If I click within the text element and click
outside the text element, we can see the red
212.04 -> outline shown as well as the error message.
214.75 -> Let us now consider another scenario.
219.29 -> I am refreshing the page, I am typing a character
within the text element.
224.94 -> Now the validation error message is shown,
but the red outline is not applied.
231.549 -> Once the element is modified, it contains
'ng-invalid' and 'ng-dirty', but we have not
239.18 -> included styles for this combination.
242.95 -> To address this issue, I am copying the existing
style selector, then including a comma after
249.43 -> the selector, then pasting whatever I have
copied and then changing 'ng-touched' to 'ng-dirty'.
260.19 -> In CSS, comma represents definition of multiple
selectors, for both of the selectors the same
266.889 -> style definitions will be applied.
270.24 -> The first selector means that, if it is an
input element having both 'ng-invalid' and
276.77 -> 'ng-touched', then the style is applied.
281.38 -> Another scenario is when an input element
has both 'ng-invalid' and 'ng-dirty', for
287.97 -> that element as well this style will be applied.
291.58 -> Let me save the file and check if it works.
297.15 -> After the page reload, I am typing a character,
when it shows minimum length validation message,
302.72 -> the outline as well is turned to red.
307.12 -> I am typing a number and we can see that that
the outline works for alphabets validation
312.52 -> as well.
314.99 -> Now let me clear the content, for mandatory
field as well the red outline is shown.
322.71 -> Let me type a proper name to see if the red
outline is not displayed.
327.789 -> We can see the red outline is not displayed
when I have a proper name entered in the input
334.88 -> text element.
337.56 -> Make note that this validation related style
definition gets applied to all the input form
343.639 -> elements that we may add in the future.
347.99 -> Hope this video helps you understand how to
implement validation error styling on a form
353.52 -> element using Control Status CSS Classes.
357.479 -> To incorporate the changes in your desktop,
include these lines in the 'app.component.css'
365.289 -> and check if it works for all validation related
scenarios.
Source: https://www.youtube.com/watch?v=UFO4sRE2Zo8