AngularJS: Numbers Text Validation and cbTooltip in ASP.NET

Introduction

In AngularJs applications, it is often necessary to validate user input to ensure data integrity. This article will guide you through creating directives to allow only numbers, allow only text, and implement cbTooltip to enhance user experience.

Allow Only Numbers in AngularJs

Step 1. Create the Directive.

Create a new directive called allow Only Number.

app.directive('allowOnlyNumber', function () {
    return {
        restrict: 'A',
        link: function (scope, elm, attrs, ctrl) {
            elm.on('keydown', function (event) {
                //if (event.shiftKey) { event.preventDefault(); return false; }
                //console.log(event.which);
                if ([8, 9, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
                    // backspace, enter, escape, arrows
                    return true;
                } else if (event.which >= 48 && event.which <= 57) {
                    // numbers 0 to 9
                    return true;
                } else if (event.which >= 96 && event.which <= 105) {
                    // numpad number
                    return true;
                }
                // else if ([110, 190].indexOf(event.which) > -1) {
                //     // dot and numpad dot
                //     return true;
                // }
                else {
                    event.preventDefault();
                    return false;
                }
            });
        }
    };
});

Step 2. Use the Directive on a Page.

Apply the directive to an input element: allow-only-number

  <asp:TextBox ID="txtNumber" autocomplete="off" placeholder="Enter Username" allow-only-number runat="server"
      Height="30px" CssClass="input-block-level"></asp:TextBox>
  

Allow Only Text in AngularJs

Step 1. Create the Directive.

Create a new directive called allow Only Text.

app.directive('allowOnlyText', function () {
    return {
        restrict: 'A',
        link: function (scope, elm, attrs, ctrl) {
            elm.on('keydown', function (event) {
                //if (event.shiftKey) { event.preventDefault(); return false; }
                //console.log(event.which);
                if ([8, 9, 13, 27, 32, 37, 38, 39, 40].indexOf(event.which) > -1) {
                    // backspace, Space, enter, escape, arrows
                    return true;
                }
                else if ((event.which >= 65 && event.which <= 90) || (event.which >= 65 && event.which <= 90)) {//CAPITAL/SMALL ALPHABETS
                    // numbers 0 to 9
                    return true;
                }
                else {
                    event.preventDefault();
                    return false;
                }
            });
        }
    }
});

Step 2. Use the Directive in a Component.

Apply the directive to an input element: allow-only-text.

  <asp:TextBox ID="txtUserName" autocomplete="off" placeholder="Enter Username" allow-only-text runat="server"
      Height="30px" CssClass="input-block-level">
</asp:TextBox>

Implement cbTooltip in AngularJs

Step 1. Install Bootstrap

Ensure Bootstrap is Added to your project.

 <script src="/Scripts/bootstrap.bundle.js"></script>

Step 2. Create the Tooltip Directive.

Create a new directive called cbTooltip.

app.directive('cbTooltip', function () {
    return {
        restrict: 'A',
        link: function (scope, elm, attrs, ctrl) {
            elm.tooltip();
        }
    }
});

Step 3. Use the Tooltip Directive in a Component.

Apply the directive to an element.

 <asp:TextBox ID="txtName" placeholder="Enter Password" cb-tooltip title="My Tool Tip" autocomplete="off" runat="server"
     Height="30px" TextMode="Password" CssClass="input-block-level"></asp:TextBox>

Step 4. Now Add AngularJs Cdn And AngularJs Directive Controller to your MasterPage.

Apply the js In MasterPage.

  <script src="/AngularJs/angular.min.js"></script>
  <script src="/AngularJs/Input_Directive.js"></script>    

Step 5. Now Register The ng-app Of Angularjs In Your Master.

Add ng-app In MasterPage.

<body ng-app="app" >
    <form name="Form1" runat="server" method="post" action="#" id="Form1">

Conclusion

By creating custom directives in Angular, you can effectively manage input validation for numbers and text, and enhance user experience with tooltips. These examples demonstrate how to implement these features in a straightforward manner, providing users with a seamless interaction with your Angular application.