angularjs - solo - regex angular 4

Validación dinámica ng-pattern de Angularjs

Question

Tengo un formulario que si una casilla de verificación es falsa impone la validación en una entrada de texto usando la directiva ng-required. Si la casilla de verificación es verdadera, el campo está oculto y ng-required está establecido en falso.

El problema es que también tengo una expresión regular para la validación especificada en la entrada y también uso la directiva angular ng-pattern. El problema al que me estoy enfrentando es que si un usuario ingresa un número de teléfono no válido, marca la casilla para desactivar esa entrada (y por lo tanto no necesita más validación), el formulario no permitirá el envío, ya que no es válido según el patrón ng.

Intenté resolver este problema agregando una función ng-change para establecer que el modelo de entrada sea nulo, sin embargo, el patrón ng y, por lo tanto, el campo aún se establece como no válido en el conjunto inicial de la casilla de verificación en falso. Sin embargo, si deselecciono la casilla, establezco todo de nuevo en la carga de formulario inicial, y luego marque la casilla de nuevo, el formulario es válido y puede enviarse. No estoy seguro de lo que me estoy perdiendo. Aquí está el código ng-change que tengo hasta ahora:

    var phoneNumberRegex = /^/(?(/d{3})/)?[ .-]?(/d{3})[ .-]?(/d{4})$/;
    $scope.phoneNumberPattern = phoneNumberRegex;
    $scope.removeValidation = function() {
        if ($scope.cell._newUser === false) {
            $scope.request._number = '''';
            $scope.phoneNumberPattern = /[0-9a-zA-Z]?/;
        } else {
            $scope.phoneNumberPattern = phoneNumberRegex;
        }
    };

Answer 1

Establece la clave de error de validación de patrón si ngModel $ viewValue no concuerda con un RegExp encontrado al evaluar la expresión angular dada en el valor del atributo. Si la expresión se evalúa como un objeto RegExp, esto se usa directamente. Si la expresión se evalúa como una cadena, se convertirá a RegExp después de envolverla en ^ y $ caracteres.

Parece que la respuesta más votada en esta pregunta debe actualizarse, porque cuando la intento no aplica la función de test y la validación no funciona.

El ejemplo de documentos angulares funciona bien para mí:

Modificación de validadores incorporados

html

<form name="form" class="css-form" novalidate>
  <div>
   Overwritten Email:
   <input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" />
   <span ng-show="form.overwrittenEmail.$error.email">This email format is invalid!</span><br>
   Model: {{myEmail}}
  </div>
</form>

js

var app = angular.module(''form-example-modify-validators'', []);

app.directive(''overwriteEmail'', function() {
    var EMAIL_REGEXP = /^[a-z0-9!#$%&''*+/=?^_`{|}~.-]+@example/.com$/i;

    return {
        require: ''ngModel'',
        restrict: '''',
        link: function(scope, elm, attrs, ctrl) {
            // only apply the validator if ngModel is present and Angular has added the email validator
            if (ctrl && ctrl.$validators.email) {

                // this will overwrite the default Angular email validator
                ctrl.$validators.email = function(modelValue) {
                    return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
                };
             }
         }
     };
 });

Plunker

Answer 2

Este es un problema interesante, validación angular compleja. El siguiente violín implementa lo que quieres:

http://jsfiddle.net/2G8gA/1/

Detalles

rpattern una nueva directiva, rpattern , que es una mezcla de Angular''s ng-required y ng-pattern code de input[type=text] . Lo que hace es observar el atributo required del campo y tenerlo en cuenta al validar con regexp, es decir, si no se requiere marcar el campo como valid-pattern .

Notas

• La mayoría del código es de Angular, adaptado a las necesidades de este.
• Cuando la casilla de verificación está marcada, el campo es obligatorio.
• El campo no está oculto cuando la casilla de verificación requerida es falsa.
• La expresión regular se simplifica para la demostración (válida es de 3 dígitos).

Una solución sucia (pero más pequeña), si no quiere una nueva directiva, sería algo así como:

$scope.phoneNumberPattern = (function() {
    var regexp = /^/(?(/d{3})/)?[ .-]?(/d{3})[ .-]?(/d{4})$/;
    return {
        test: function(value) {
            if( $scope.requireTel === false ) {
                return true;
            }
            return regexp.test(value);
        }
    };
})();

Y en HTML no se requieren cambios:

<input type="text" ng-model="..." ng-required="requireTel"
    ng-pattern="phoneNumberPattern" />

Esto en realidad engaña a angular para llamar a nuestro método de test() , en lugar de RegExp.test() , que toma en cuenta lo required .

Answer 3

Me encontré con esto el otro día.

Lo que hice, que parece más fácil que lo anterior, es establecer el patrón en una variable en el alcance y referirme a él en ng-pattern en la vista.

Cuando "la casilla de verificación está desmarcada", simplemente configuro el valor regex en /.*/ en la devolución de llamada onChanged (si se va a desmarcar). ng-pattern picks que cambian y dice "OK, tu valor está bien". La forma ahora es valida También eliminaría los datos incorrectos del campo para que no tengas un aparente mal número de teléfono allí.

Tuve problemas adicionales alrededor de ng-required, e hice lo mismo. Trabajado como un encanto.

Answer 4

Patrón utilizado:

 ng-pattern="/^/d{0,9}(/./d{1,9})?$/"

Archivo de referencia utilizado:

 ''<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>''

Ejemplo de entrada:

 <input type="number" require ng-pattern="/^/d{0,9}(/./d{1,9})?$/"><input type="submit">

Answer 5

Puede usar el sitio https://regex101.com/ para crear su propio patrón específico para algún país:

Por ejemplo, Polonia:

-pattern = xxxxxxxxx OR xxx-xxx-xxx OR xxx xxx xxx 
-regexp ="^/d{9}|^/d{3}-/d{3}-/d{3}|^/d{3}/s/d{3}/s/d{3}"

Answer 6

Sin quitar nada de la asombrosa respuesta de Nikos, quizás puedas hacer esto de manera más simple:

<form name="telForm">
  <input name="cb" type=''checkbox'' data-ng-modal=''requireTel''>
  <input name="tel" type="text" ng-model="..." ng-if=''requireTel'' ng-pattern="phoneNumberPattern" required/>
  <button type="submit" ng-disabled="telForm.$invalid || telForm.$pristine">Submit</button>
</form>

Preste atención a la segunda entrada: podemos usar un ng-if para controlar la representación y la validación en los formularios. Si la variable requireTel está configurada, la segunda entrada no solo se ocultará, sino que no se procesará, por lo que el formulario pasará la validación y el botón se habilitará, y obtendrá lo que necesita.

Answer 7

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>

<input type="number" require ng-pattern="/^/d{0,9}(/./d{1,9})?$/"><input type="submit">