Introduction
Styling is an important activity while implementing form validation. We should provide the necessary warning or indications to inform the user about valid and invalid inputs.
We can use both CSS validation classes and validation properties to style the form validation
As we know, Angular will automatically add the appropriate CSS classes to the input field/form based on the value change. So we can add more style properties into these classes to get more information about the validation issue. For example, if the input field is required and the user did not provide any vale for it, we can give a red border around the field to indicate to the user that the field is a required one.
Let’s try this in our application.
Open our form component’s CSS file. In my project, it is ‘user-registration-form.component.css’ Then add the border style property to the ng-invalid CSS validation class with border width 1px, style as ‘solid’ and color as ‘Red’.
Please refer to the screenshot below.
This will create a red border around all invalid form controls.
Save the file and check the result in browser. We will get the result as in the below screenshot.
As you can see in the above screenshot, the red border will appears around both name input field and entire form because, the name input field is invalid (it is a required field). So the form is also invalid (as I mentioned in my previous article, the validity of the form is based on the validity of its child controls.). So the ng-invalid class will be applicable for both name input field and for the entire form.
To remove the red border from entire form, we can use the :not(form) statement with ng-invalid class.
Please refer to the screenshot below.
Now, the border is removed from the form and will appear around name input field only.
Refer to the screenshot below.
But one more issue is here. The red border will appear even before the user enters any value inside the input field. We should give some time for the user to do some actions in our form. To fix this problem, we can use ‘ng-touched’ CSS validation class with ng-invalid class.
Please refer to the screenshot below.
This will make sure that the border will be added to the input field only when both ng-invalid and ng-touched classes are applicable to that input field.
So the border will appear only if the user enters into that field and leaves it without providing any value or submits the form without providing any value for the name input field.
Display the Error Message
We can display custom validation messages using the ngModel validation properties. We can show/hide the messages using these properties.
Let’s add a simple div element for name input field and make it visible /hidden based on the value of the valid and untouched property. That is, if the name input field is valid or untouched, the div should be hidden from the screen.
Please refer to the screenshot below.
Here, I have used inline style to set the font color as red. Save the template file and check the result in the browser. An error message will appear if the user moves out from the name field without providing any value.
Please refer to the screenshot below.
In this way we can style the form validation using validation classes and properties.
If the form is complicated and contains a large number of input controls, it would not be a good approach to display the validation errors one by one while the user is filling the form. We can use another approach to implement the validation. In this approach, no error message gets seen until the user attempts to submit the form. For this, we need to add the ngSubmit event and bind it to the method in the component class.
I have created a method register() inside my component class and passed the form’s template variable as a parameter.
Please refer to the screenshot below.
Then I have added the class ‘error-border’ dynamically based on the values of the username.invalid and userRegForm.submitted properties; i.e., the red border will appear only if the name field is ‘invalid’ but the form status is ‘submitted’. Similarly, Error message div block will be hidden as long as the username field is ‘valid’ OR the form status is ‘not submitted’.
In the CSS file I have added the class error-border with the below definition.
Save the files and check the browser to see the output. Unlike before, we are allowed to click the name field and move to some other control without providing any values and our app will not generate any validation error. But if you click the Submit button, it will generate the validation error.
Please refer to the screenshot below.
We can add moe validation logicsusing this properties and CSS classes based on our requirements.
Summary
In this article, I have tried to explain about how to use the CSS validation classes and ngModel validation properties to style Angular forms.
Happy Learning
![]()