Identify numbers and letters typed in input fields with typescript

0

I want to perform an alphanumeric validation, requiring the use of capital 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 cdc5fr number is entered. Here is the 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'>
    
asked by anonymous 30.08.2018 / 05:06

2 answers

1

Try something like:

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

no ts:

passwordRegex="seuRegex"
    
30.08.2018 / 13:35
0

Talk to and 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: link )

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

<html>
            <head>
                <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script><script>varmyApp=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>
    
30.08.2018 / 05:42