Как санкционировать неудар в лунку в AngularJS (Угловой 1) для того, чтобы он не показал ошибку в других, если они появляются с ng-repeat?

у меня есть следующий html, чтобы мочь добавлять телефоны к контакту, я делаю утверждение с AngularJS для того, чтобы не были зарегистрированы телефоны с символами, если не одинокий числа, проблема состоит в том, что, если добавил два телефона первый правильно и второй неправильный, он посылает мне сообщение ошибки в обоих, не, если было возможно предотвращать это со структурой, которая у меня есть.

        
X
El número de telefono no cumple con el formato correcto
Introduce solo numeros en la extensión

У меня есть следующая кнопка, чтобы добавлять новый телефон...

         
Agregar

Одинокий который создает новое место в договоренности contacto.director.telefonos, scope, который это делает, - следующий...

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

0
задан 28.08.2019, 18:06
0 ответов

Если я не ошибаюсь, в angularjs даже не возможно создавать ng-models динамические в этом случае, когда есть один ng-repeat то, что я советую тебе (что это решает очень хорошего способа, - следующее:

Я определил так называемую договоренность models он опустошил и верь в договоренность контактов (так как не, как их получаешь ты)

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

Потом я делаю один each на $scope.contactos и я распределяю ему стоимость в $scope.model

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

Этот код верьте в индекс внутри договоренности $scope.models с ними пойдите твоих контактов...

Осталось бы что-либо подобное, если ты печатаешь $scope.model

{1 : '', 2: ''}

Когда ты рисуешь формуляр с ng-repeat оно было бы чем-либо подобным:

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

Если ты обращаешь внимание, неудар в лунку телефона иди ng-model=model[contacto.id] это означает, что сейчас независимая статья ng-repeat с другим. Это поможет тебе санкционировать телефон, который соответствует и не все, так как ты раньше имел для всех ng-repeat что производили того же самого ng-model.

Давайте предполагать, что ты получаешь данные с консультации в твой сервер, и ЕСЛИ он состоит в том, что у контакта уже есть номер телефона и эта стоимость приходит в консультации, он стоит Вашей модели совсем не setearlo, так как он собственный, и это было бы так:

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

Я оставляю тебе codepen с этим же самым примером, для того, чтобы ты это увидел, что ты был бы должен добавлять сейчас, так это утверждение, которое ты создал, но с этим не было бы никакой проблемы.

РЕДАКТИРОВАНИЕ

Поскольку ты можешь добавлять более 1 телефона, и это динамический элемент я рекомендую тебе следующее:

Agrege в объект контактировал с договоренностью, которую называются телефоны (они могут приходить или нет, как он соответствовал твои данные)

Договоренность models уже он не необходим.

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

Чтобы заносить в список их он следующего способа:

<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()">

Добавьте кнопку, у которой есть функция agregarNumero и он послал ему из-за параметра контакт, который соответствует в ng-repeat и функция делает следующее:

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

Что не делает больше, что добавлять пустой объект к договоренности telefonos контакта, не преодолевая 4.

В конце концов функция enviar напечатай договоренность $scope.contactos

Если tas он считает по мере того, как добавлять, добавляют неудар в лунку, чтобы вводить этот телефон в компьютер

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

Ты должен добавлять в

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

Утверждение, которого ты имеешь.

codepen также обновлен

РЕДАКТИРОВАНИЕ 2

Попробовав санкционировать regex с ng-model в одном ng-repeatон мне был сделан невозможным тем, что я сделал следующее:

Верит один directive названный phone что главным образом оценивает, если выполняется матч с regex, который ты вручил мне.

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');
                }
            });
        }
    }
})

В виде я сделал следующее:

Оставьте все внутри <form name="form> я поместил ему признак name=phone и agrege data-phone в неудар в лунку ( ng-model продолжи быть равным)

Кроме того добавьте следующий код:

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

По умолчанию я скрываю

Если ты dijas, в directive я получаю элемент, который angular.element(this) что был бы <input> где пользователь пишет., заняв next() я получаю следующего, который был бы <span> если утверждение с regex это недействительная, в элемент он poongo красный фон (только как пример, ты можешь давать другой цвет, класс, и т.д.) и я даю ему display:block в <span> что был скрытым.

<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>
2
ответ дан 03.12.2019, 18:34
  • 1
    проблема состоит в том, что у меня есть другая структура, - единственный контакт, и поле телефоны - договоренность, если я даю в кнопке добавлять ему, позволяет мне добавлять до 4 телефонов того же контакта. –   14.12.2016, 22:35
  • 2
    ты можешь показывать структуру? –   14.12.2016, 22:36
  • 3
    я только что издал... –   14.12.2016, 22:44
  • 4
    @AlbertoRojas обновите –   14.12.2016, 23:09
  • 5
    уже probé и оно не функционирует ни в pen, который ты поместил.... @sioesi –   15.12.2016, 19:23