AngularJS Form Validation: TextBox and Button Click

admin | Posted on May 13, 2021 |

Validation is the process ensuring that data is correct and complete.

When the user submits the registration form, normally a validation would occur first before the details are sent to the server. This validation would try to ensure to the best possible extent that the details for the input fields are entered in the right manner.

For example, the age always needs to be in a positive number if someone enters just the character or special character in the age, then ideally the validation should fail. So validation looks at doing these basic checks before the details are sent to the server for further processing.

so Let’s see the validation using Angular js.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event validation</title>
</head>

<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="/lib/bootstrap.js"></script>
<script src="/lib/bootstrap.css"></script>
<h1> Script guru Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
    <p>Topic Name:<br>
        <input type="text" name="user" ng-model="user" required>

        <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">

            <span ng-show="myForm.user.$error.required">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
    </p>
</form>
<script>
    var app = angular.module("DemoApp",[]);

    app.controller("DemoController",function($scope) {

        $scope.Display = function () {
            $scope.user='Angular';
        }
    });
</script>
</body>
</html>

Explanation for coding:

Note we have given a name for the Form which is “myForm”. This is required when accessing the controls on the form for AngularJS validation.
Using the “novalidate” property for ensuring that the HTML form allows AngularJS to carry out the validation.
We are using the ng-show directive to check for the “$dirty” and “$invalid” property. This means that if the textbox has been modified, then the “$dirty” property value will be true. Also, in the case where the textbox value is null the “$invalid” property will become true. So if both properties are true, then the validation will fail for the control. Hence, if both values are true, the ng-show will also become true, and the span control with the red color characters will be displayed.
In this, we are checking the “$error” property which also evaluates to true because we have mentioned for the control that value should be entered for the control. In such a case, where there is no data entered in the text box the span control will display the text “Username is required”.
If the textbox control value is invalid, we also want to disable the submit button so that the user cannot submit the form. We are using the “ng-disabled” property for the control to do this based on the conditional value of the “$dirty” and “$invalid” property of the control.
In the controller, we are just setting the initial value of the textbox value to the text ‘Angular’. This is just being done to set some default value to the textbox when the form is first displayed. It showcases better on how the validation occurs for the textbox field.

Leave a Reply Cancel reply