0

tengo el siguiente html para poder agregar teléfonos a un contacto,hago una validación con AngularJS para que no se registren teléfonos con caracteres si no solo números, el problema es que si agrego dos telefonos el primero correctamente y el segundo incorrecto, me manda el mensaje de error en ambos, no se si se pueda evitar eso con la estructura que tengo.

        <div class="input-group select-phone" ng-repeat="tel in contacto.director.telefonos">
            <select name="otroTipoTel-director" ng-model="tel.tipotel" class="input_director" id="" ng-disabled="inputDirector">
                  <option value="">--Selecciona</option>
                  <option value="Asistente">Tel. Asistente</option>
                  <option value="Personal">Tel. Personal</option>
                  <option value="Fax">Tel. FAX</option>
                  <option value="Personal2">Tel. Personal 2</option>
                  <option value="Oficina">Tel. Oficina 2</option>
            </select>
            <!-- número de teléfono-->
            <input maxlength="12" id="otroTel-director" type="text" ng-disabled="inputDirector" class="input_director" ng-model="tel.telefono" placeholder="Teléfono" name="otroTelDir" mask="99-9999-9999" ng-pattern="/^\d{2}-\d{4}-\d{4}$/" ng-class="{invalid: formContactoDependencia.otroTelDir.$error.pattern}">
            <!-- extension del teléfono-->
            <input maxlength="80" id="otroExt-director" type="text" ng-disabled="inputDirector" class="input_director extension" ng-model="tel.extension" placeholder="Extensión" name="otroExtDir" ng-pattern="/^\d+$/" ng-class="{invalid: formContactoDependencia.extDirector.$error.pattern}">
            <!-- boton X para eliminar-->
            <a href="#" id="telDirector" class="dropIt Alagoma" ng-show="Xdirector" ng-click="quitarNuevo(contacto, contacto.director.telefonos.indexOf(t), $event)">X</a>
            <div ng-show="formContactoDependencia.otroTelDir.$error.pattern">
                <span class="error" >
                    El número de telefono no cumple con el formato correcto 
                </span>
            </div> 
            <div ng-show="formContactoDependencia.otroExtDir.$error.pattern">
                <span class="error" >
                     Introduce solo numeros en la extensión
                </span>
            </div> 
       </div>

Tengo el siguiente boton para agregar un nuevo telefono...

         <div class="adiciona Alagoma" ng-show="Adirector" id="directorTelefono" ng-click="nuevoTelefono(telefonoDirector,contacto , $event)" ng-hide="contacto.director.telefonos.length>=4"> <!-- ng-hide="dess" -->
            <div><i class="icon director-telefono" ></i></div>
                <span>Agregar</span>
        </div>

El cual solo crea un nuevo espacio en el arreglo contacto.director.telefonos el scope que lo hace es el siguiente...

    //Scope para agregar un nuevo telefono
    $scope.nuevoTelefono = function (obj,contacto, e) {
        var e = e.target.id;
        console.log(e, "es el valor de ...")
        if(e == "directorTelefono") {
                console.log('Contacto --> ' + JSON.stringify(contacto));
                if(contacto.director){
                    if(contacto.director.telefonos){

                        if($.isArray(contacto.director.telefonos)){
                            if (contacto.director.telefonos.length < 4) contacto.director.telefonos.push({});
                        }else{
                            $scope.contacto.director.telefonos = [];
                            if (contacto.director.telefonos.length < 4) contacto.director.telefonos.push({});
                        }

                    }else{
                        contacto.director.telefonos = [];
                            if (contacto.director.telefonos.length < 4) contacto.director.telefonos.push({});
                    }
                }else{
                    contacto.director = "sdfsdfsd";
                    console.log(contacto.director)
                    contacto.director.telefonos = [];
                            if (contacto.director.telefonos.length < 4) contacto.director.telefonos.push({});
                }
        }
    };

introducir la descripción de la imagen aquí

4
  • 1
    consulta, como agregas un segundo telefono? es un input que ya esta hecho, que viene por defecto en un objeto? es dinamico?
    – sioesi
    Commented el 14 dic. 2016 a las 19:52
  • es un input hecho, viene en el código de arriba, creo que el problema es que al hacer un recorrido, los dos imputs tienen el mismo atributo name, por eso hace la validacion en ambas. Commented el 14 dic. 2016 a las 20:07
  • te deje la respuesta @AlbertoRojas
    – sioesi
    Commented el 14 dic. 2016 a las 20:08
  • ng-pattern="/^\d{2}-\d{4}-\d{4}$/" este es para la etiqueta input y este es el encargado de mostrar el mensaje <div ng-show="formContactoDependencia.otroTelDir.$error.pattern"> <span class="error" > El número de telefono no cumple con el formato correcto </span> </div> pero veo que mi error esta en que lo pongo dentro del div con el ngrepeat, ya lo saqué de ahi y parece que funciona. Commented el 15 dic. 2016 a las 17:53

1 respuesta 1

3

Si no me equivoco, en angularjs aun no es posible crear ng-models dinamicos en este caso cuando hay un ng-repeat lo que te aconsejo (que lo soluciona de muy buena manera es lo siguiente :

Defini un arreglo llamado models vacio y cree un arreglo de contactos (ya que no se como los obtienes tu)

$scope.model = [];
$scope.contactos = [
    { id: 1, nombre: "Contacto 1", telefono: '' },
    { id: 2, nombre: "Contacto 2", telefono: '' }
];

Luego hago un each sobre $scope.contactos y le asigno valores a $scope.model

angular.forEach($scope.contactos, function(index, contacto){
    $scope.model[index.id] = "";
});

Este codigo crea un indice dentro del arreglo $scope.models con las id de tus contactos...

Quedaria algo asi, si imprimes $scope.model

{1 : '', 2: ''}

Cuando dibujas el formulario con el ng-repeat seria algo asi :

<div ng-repeat="contacto in contactos">
    <p>Nombre : {{contacto.nombre}}</p>
    Telefono : <input type="text" ng-model="model[contacto.id]" placeholder="Ingrese telefono">
</div>

Si te fijas, el input de telefono lleva el ng-model=model[contacto.id] esto quiere decir, que ahora es independiente un item del ng-repeat con otro. Esto te ayudara a validar el telefono que corresponda y no todos, ya que tu antiguamente tenias para todos los ng-repeat que se generaban el mismo ng-model.

Supongamos que tu obtienes los datos desde una consulta a tu servidor y SI es que el contacto ya tiene un numero de telefono y ese valor viene en la consulta, no cuesta nada setearlo a su modelo, ya que es propio y seria asi :

angular.forEach($scope.contactos, function(index, contacto){
    $scope.model[index.id] = index.telefono;
});

Te dejo un codepen con este mismo ejemplo, para que lo veas, lo que deberias agregar ahora seria la validación que creaste, pero con eso no habria ningun problema.

EDICION

Como puedes agregar más de 1 telefono y es un elemento dinamico te recomiendo lo siguiente :

Agrege al objeto contacto un arreglo que se llama telefonos (pueden venir o no, segun corresponda tus datos)

El arreglo models ya no es necesario.

$scope.contactos = [
       {id:1, nombre : "Contacto 1", telefonos : [{0 : '54565432'}]},
       {id:2, nombre : "Contacto 2", telefonos : [{}]}
];

Para listarlos es de la siguiente manera :

<div ng-repeat="contacto in contactos">
    <p>Nombre : {{contacto.nombre}}</p>
    Telefono :
    <button ng-click="agregarNumero(contacto)">Agregar numero</button>
    <div ng-repeat="tel in contacto.telefonos">
        <input type="text" placeholder="Ingrese telefono" ng-model="tel[$index]">
    </div>
</div>
<input type="button" value="enviar" ng-click="enviar()">

Agregue un boton que tiene la funcion agregarNumero y le envio por parametro el contacto que corresponde al ng-repeat y la funcion hace lo siguiente :

$scope.agregarNumero = function(contacto){
    if(contacto.telefonos.length < 4){
      contacto.telefonos.push({});
    }
}

Que no hace mas que agregar un objeto vacio al arreglo telefonos del contacto sin superar los 4.

Finalmente la funcion enviar imprime el arreglo $scope.contactos

Si de tas cuenta a medida que agregar, se va agregando un input para ingresar ese telefono

$scope.enviar = function(){
    console.log($scope.contactos);
}

Debes agregar a

<input type="text" placeholder="Ingrese telefono" ng-model="tel[$index]">

La validación de que tienes.

El codepen tambien esta actualizado

EDICION 2

Al intentar validar el regex con ng-model en un ng-repeat se me hizo imposible por lo que hice lo siguiente :

Cree un directive llamado phone que basicamente evalua si se cumple el match con el regex que tu me entregaste.

var app = angular.module('mySuperApp', ['ionic'])
var PHONE_REGEXP = /^\d{2}-\d{4}-\d{4}$/;
app.directive('phone', function() {
    return {
        restrice: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl) {
            angular.element(element).bind('blur', function() {
                var value = this.value;
                if (PHONE_REGEXP.test(value)) {
                    angular.element(this).next().css('display', 'none');
                    angular.element(this).css('background', 'none');
                } else {
                    angular.element(this).next().css('display', 'block');
                    angular.element(this).css('background', 'red');
                }
            });
        }
    }
})

En la vista hice lo siguiente:

Deje todo dentro del <form name="form> le puse el atributo name=phone y agrege data-phone al input (el ng-model sigue igual)

Ademas agregue el siguiente codigo :

<span style="display:none;">Por favor ingresa un numero valido.</span> 

Por defecto oculto

Si te dijas, en el directive recibo un elemento que es angular.element(this) que vendria siendo el <input> en donde el usuario esta escribiendo.. al ocupar next() obtengo el siguiente que seria el <span> si la validacion con el regex es invalida, al elemento le poongo el fondo rojo (solo como ejemplo, tu puedes dar otro color, una clase, etc) y le doy display:block al <span> que estaba oculto.

<form name="form" novalidate>
    <div ng-repeat="contacto in contactos">
        <p>Nombre : {{contacto.nombre}}</p>
        Telefono :
        <button ng-click="agregarNumero(contacto)">Agregar numero</button>
        <div ng-repeat="tel in contacto.telefonos">
            <input type="text" name="phone" class="telefono" data-phone placeholder="Ingrese telefono" ng-model="tel[$index]" />
            <span style="display:none;">Por favor ingresa un numero valido.</span> 
        </div>
    </div>
    <input type="button" value="enviar" ng-click="enviar()">
</form>
11
  • el problema es que tengo otra estructura, es un solo contacto, y el campo telefonos es un arreglo si le doy en un boton agregar me permite agregar hasta 4 telefonos de un mismo contacto. Commented el 14 dic. 2016 a las 20:35
  • puedes mostrar la estructura?
    – sioesi
    Commented el 14 dic. 2016 a las 20:36
  • acabo de editar... Commented el 14 dic. 2016 a las 20:44
  • @AlbertoRojas actualice
    – sioesi
    Commented el 14 dic. 2016 a las 21:09
  • ya lo probé y no funciona ni en el pen que pusiste.... @sioesi Commented el 15 dic. 2016 a las 17:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.