0

Quero fazer uma validação alfanumérica sendo obrigatório o uso de letras maiúsculas e números digitados em um input utilizando typescript. Preciso saber quando é digitado uma letra maiúscula, por exempo nAbd e quando é digitado um número cdc5fr. Segue código:

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'>

2
  • Voce esta usando reactive forms? Tem como postar seu codigo. Commented 30/08/2018 às 9:07
  • @EduardoVargas, coloquei o código, porém não estou usando nenhum método para pegar esses valores que preciso pq não sei exatamente como pegar, mas a lógica é igual a esse "length" que estou pegando através do ngModel, sendo assim não utilizo formulários reativos aqui. Commented 30/08/2018 às 11:00

2 Respostas 2

1

Tenta algo como:

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

no ts:

passwordRegex="seuRegex"
0

Fala ae, você pode usar regex para verificar os campos.

Segue abaixo um breve explicação.

    (?=.*[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.
   

O código abaixo não é meu(Original: https://www.thepolyglotdeveloper.com/2015/05/use-regex-to-test-password-strength-in-javascript/)

Ele cria uma função "analyze" que é chamada no ng-change para validar as condições informadas anteriormente.

<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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .