Question

我有两组数据：＆＃34;加热＆＃34;和＆＃34;冷＆＃34;，从另一个提供商检索。这些数据非常无组织，我在代码中删除了很多东西只是为了显示我的问题的基本部分。＆＃34;热＆＃34;和＆＃34;冷＆＃34;两者都包含用户必须填写的属性。但是这个属性是动态的，并且属性的数量不固定（因此它处于循环中，如代码所示）。

我的目标是隐藏/禁用提交按钮，只要列表中任何一组数据中的单个输入字段为空，该按钮就会一直向下。这也应该最好适用于Internet Explorer 9，其中需要＆＃39;标签不受支持。

我试过了：

添加所需的标签。遗憾的是，这在IE9中无效，即使在谷歌浏览器中也存在一些问题，因为它仍在提交我的表单。（我也添加了表单标签）
在提交表单上添加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

这里你去：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 2

不是特定于角度，但您可以通过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;
}

Answer 3

我有两个选项，但它们都包含ng-disabled（https://docs.angularjs.org/api/ng/directive/ngDisabled）。

您可以将此属性放在按钮上，您可以在该属性的范围内调用函数，并检查是否给出了所有值。

所以喜欢：ng-disabled="checkInputs()"。

或者

围绕所有输入包装表单，为表单指定name=form之类的名称，并在所有输入上设置required属性。（编辑：您可以将ng-required="true"用于IE9。）

然后你可以说ng-disabled="!form.$valid"。

如果输入为空，请不要提交表格

3 个答案: