у меня есть следующий html, чтобы мочь добавлять телефоны к контакту, я делаю утверждение с AngularJS для того, чтобы не были зарегистрированы телефоны с символами, если не одинокий числа, проблема состоит в том, что, если добавил два телефона первый правильно и второй неправильный, он посылает мне сообщение ошибки в обоих, не, если было возможно предотвращать это со структурой, которая у меня есть.
<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>
У меня есть следующая кнопка, чтобы добавлять новый телефон...
<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>
Одинокий который создает новое место в договоренности 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({});
}
}
};
Если я не ошибаюсь, в 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>