Не отправляйте форму, если входные данные пустые

Question

У меня есть два набора данных: «тепло» и «холод», которые извлекаются из другого поставщика. Эти данные довольно неорганизованны, и я удалил много всего в коде, чтобы показать основную часть моей проблемы. «Тепло» и «холод» содержат свойства, которые пользователь должен заполнить. Однако это свойство является динамическим, и количество свойств не фиксировано (следовательно, оно находится в цикле, как показано в коде).

Моя цель - скрыть/отключить кнопку отправки, которая находится на всем пути вниз, когда одно одно поле ввода в списке в обоих наборах данных пуст. Это также должно быть предпочтительно работать в Internet Explorer 9, где не требуется тег 'required'.

Я попытался:

• Добавление требуемого тега. К сожалению, это не работает в IE9, и у меня есть некоторые проблемы даже в Google Chrome, потому что он по-прежнему отправляет мою форму. (Я также добавил теги формы)

• Добавить Ng-show в форме отправки. Я проверил, является ли userInput пустым, но это все еще не работает.

• Теперь вы можете спросить, почему бы мне просто не проверить мой контроллер, являются ли эти свойства пустыми в моем методе отправки? Хотя это хороший момент, я не могу получить доступ к этим динамическим данным очень легко в моем контроллере. Следовательно, мне нужно решение, которое, надеюсь, устранит эту проблему без каких-либо усилий в контроллере.

Код:

<!--Start wrapper!--> 
<div class="wrapper"> 
    <div ng-repeat="(code, program) in data.old.heat"> 
    <div class="row" ng-repeat="(componentId, component) in program"> 
     <div class="inputForm"> 
     <!--This field may not be left empty!--> 
     <input type="text" class="form" ng-model="component.userInput"> 
     </div> 
    </div> 
    </div> 

    <div ng-repeat="(code, program) in data.old.cold"> 
    <div class="row" ng-repeat="(componentId, component) in program"> 
     <div class="inputForm"> 
     <!--This field may not be left empty!--> 
     <input type="text" class="form" ng-model="component.userInput"> 
     </div> 
    </div> 
    </div> 
</div> 
<!--End of wrapper !--> 

<div class="submitPanel"> 
    <button ng-click="submit()">Submit</button> 
</div> 

Answer 1

У меня есть два варианта для вас, но оба они включают ng-disabled (https://docs.angularjs.org/api/ng/directive/ngDisabled).

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

So like: ng-disabled="checkInputs()".

Или

Вы обернуть форму вокруг всех входов, дайте форме имя как name=form и установить атрибут required на всех входах. (EDIT:. Вы можете использовать ng-required="true" для IE9)

Тогда можно сказать, что ng-disabled="!form.$valid".

Answer 2

Здесь я пойти: https://jsfiddle.net/DIRTY_SMITH/zxbe5rt0/

function validate(){ 
var text1 = document.getElementById('text').value; 

if (text1.length > 0){ 
    alert("went through"); 
    return true; 
} 
alert("did not go through"); 
return false; 
} 

Answer 3

не специфичны для углового, но вы можете проверить, если он имеет символы с помощью jQuery.

Html

<div class="submitPanel"> 
    <button class="submit-btn" ng-click="submit()">Submit</button> 
</div> 

JQuery

$('#form input').blur(function() 
{ 
    if($(this).val().length === 0) { 
     $(this).parents('.submit-btn').addClass('hide'); 
    } 
}); 

CSS

.hide{ 
display:none; 
}