In the previous post, we learnt how to validate the HTML form using AngularJS and notify the user. In this post, we will go one step ahead and learn how to check for validation and give custom error message to the user.
In below code snippet, we have <style> block in which CSS style defined for ng-invalid and ng-valid that are set to the element when AngularJS mark them as invalid and valid respectively.
In the <script> block, we have $scope.InputValue
property defined. We have also defined ValidationError
function that returns error message based on whether the passed item is invalid.
<style>
.ng-valid{
border:4px double green;
}
.ng-invalid {
border: 4px double red;
}
</style>
<script>
var app = angular.module("app", []);
app.controller("InputController", function ($scope) {
$scope.InputValue = "Type here";
$scope.ValidationError = function (item) {
if (item.$dirty && item.$error.required)
{
return "This text box is mandatory !";
}
else
{
return "";
}
};
});
</script>
In the HTML block, we have a text box with the ng-model defined as the $scope property. We have also defined following AngularJS attributes
Next we have ng-show directive that shows or hide the element based on its value returned. In this element, we are calling ValidationError
functiont that returns the custom error message if the text box is marked invalid.
<div ng-app="app" ng-controller="InputController">
<form name="myForm" action="~/Views/Forms/Checkbox.cshtml" method="post">
<div style="padding:10px;">
<input type="text" name="txt" ng-model="InputValue" ng-minlength="5"
ng-maxlength="20" required />
<span ng-show="myForm.txt.$invalid" style="color:red;">{{ ValidationError(myForm.txt) }}</span>
<input type="submit" value="Submit" />
<hr />
<p><b>Is Required:</b> {{ !!myForm.$error.required}}</p>
<hr />
<p><b>Is Textbox Invalid:</b> {{ myForm.txt.$invalid}}</p>
<p><b>Text box Error:</b> {{myForm.txt.$error}}</p>
<hr />
<p><b>Is Form Valid:</b> {{ myForm.$valid}}</p>
<p><b>Form Error:</b> {{myForm.$error}}</p>
</div>
</form>
</div>
After that we have shown some of the AngularJS form properties that are set true/false or other values based on whether the form is invalid or valid.
Output
Views: 11342 | Post Order: 48