Identify numbers and letters typed in input fields with typescript

Asked

Viewed 535 times

0

I want to make an alphanumeric validation being mandatory the use of uppercase letters and numbers typed in an input using typescript. I need to know when a capital letter is typed, for example nAbd and when a number is entered cdc5fr. Follows code:

pp: any;
b1: Boolean = false;
status1: Boolean = false;
onKeySearch($event) {    
    this.cont = this.pp.length;
    if (this.cont > 5) {
      this.b1 = true;
      this.status1 = true;
    } else {
      this.b1 = false;
      this.status1 = false;
    }
  }
<input (keyup)="onKeySearch($event)" type="password" [(ngModel)]='pp'>

javascript angular typescript

  • Are you using reactive Forms? You can post your code.

  • @Eduardovargas, I put the code, but I’m not using any method to get these values I need because I don’t know exactly how to get it, but the logic is equal to this "length" that I’m taking through ngModel, so I don’t use reactive forms here.

2 answers

1

Try something like:

<input [pattern]="passwordRegex" type="password" [(ngModel)]='pp'>

no ts:

passwordRegex="seuRegex"

0

Speak ae, you can use regex to check the fields.

Below is a brief explanation.

    (?=.*[a-z]) A string deve conter uma letra minuscula
    (?=.*[A-Z]) A string deve conter uma letra maiuscula
    (?=.*[0-9]) A string deve conter um numero de 0 a 9
    (?=.[!@#\$%\^&]) A string deve conter uma caractere especial
    (?=.{8,})   A string deve conter 8 ou mais caracteres.

The code below is not mine(Original: https://www.thepolyglotdeveloper.com/2015/05/use-regex-to-test-password-strength-in-javascript/)

It creates an "Analyze" function that is called in ng-change to validate the previously reported conditions. 

<html>
            <head>
                <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
                <script>
                    var myApp = angular.module("myapp", []);
                    myApp.controller("PasswordController", function($scope) {

                        var strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
                        var mediumRegex = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");

                        $scope.passwordStrength = {
                            "float": "left",
                            "width": "100px",
                            "height": "25px",
                            "margin-left": "5px"
                        };

                        $scope.analyze = function(value) {
                            if(strongRegex.test(value)) {
                                $scope.passwordStrength["background-color"] = "green";
                            } else if(mediumRegex.test(value)) {
                                $scope.passwordStrength["background-color"] = "orange";
                            } else {
                                $scope.passwordStrength["background-color"] = "red";
                            }
                        };

                    });
                </script>
            </head>
            <body ng-app="myapp">
                <div ng-controller="PasswordController">
                    <div style="float: left; width: 100px">
                        <input type="text" ng-model="password" ng-change="analyze(password)" style="width: 100px; height: 25px" />
                    </div>
                    <div ng-style="passwordStrength"></div>
                </div>
            </body>
        </html>

Browser other questions tagged javascript angular typescript

You are not signed in. Login or sign up in order to post.