Question

我正在使用angular.js处理动态表单。输入字段

<div ng-show="condition()">
    <input type="text" name="field" required>
</div>

如果condition（）返回false，则不会显示输入字段。但是点击提交按钮，我会得到chrome，消息：

An invalid form control with name='field' is not focusable.

嗯，一个解决方案是，使用ng-required：

<div ng-show="condition()">
    <input type="text" name="field" ng-required="condition()">
</div>

好吧，在这里我必须重复使用条件（）几次代码。

当你可以封装ng-show时会变坏：

<div ng-show="condition1()">
    <div ng-show="condition2()">
        <input type="text" name="field"
            ng-required="condition1() && condition2()">
    </div>
</div>

有没有更好的方法，当输入可见时，所需的标签应该在那里，而不是，如果它是隐藏的。

Answer 1

使用ng-show而不是使用ng-show，因为当你使用ng-show时，那个元素仍然是DOM的一部分。

类似的东西：

<div ng-if="condition()">
    <input type="text" name="field" required>
</div>

这样你就不会收到错误

An invalid form control with name='field' is not focusable.

Answer 2

一种选择是使用变量而不是调用函数。

<div ng-show="condition1()">
<div ng-show="condition2()">
    <input type="text" name="field"
        ng-required="isRequired">
</div>

并且在您的控制器中，您可以在condition1（）和/或condition2（）函数中将isRequired变量设置为true或false。

function myController($scope){
  $scope.isRequired = false;  // initialize it

  $scope.condition1 = condition1;
  $scope.condition2 = condition2;

  function condition1(){
    var returnValue = false;
    // Do some testing that sets returnValue true or false    
    $scope.isRequired = returnValue;
    return returnValue;
  }

  function condition2(){
    var returnValue = false;
    // Do some testing that sets returnValue true or false    
    $scope.isRequired = returnValue;
    return returnValue;
  }
}

显然这不是防弹代码。但这是一个开始。

Answer 3

我建议您需要使用ng-if来删除表单中的元素，或者如果条件不是satiesfied则可以说DOM。你的代码会变得像

<div>
    <div>
        <input type="text" name="field"
            ng-if="condition1() && condition2()" required>
    </div>
</div>

如果输入元素未隐藏，则为其设置必需属性

3 个答案: