Установить требуемый атрибут для элемента ввода, если он не скрыт

Question

Я работаю над динамической формой, используя angular.js. Входы поля

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

Если условие() возвращает ложь, то поле ввода не будет отображаться. Но, нажав на кнопку отправки, я займусь хром, сообщение:

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

Ну, решение, использовать нг-во:

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

Ну, вот у меня есть повторить код, используя условие() несколько раз.

Это становится плохо, когда вы можете инкапсулировать нг-шоу:

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

Есть ли лучший способ, необходимый тег должен быть там, когда вход виден, и нет, если это скрыто.

Answer 1

Вместо использования ng-show используйте ng-if, потому что, когда вы используете 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

Я бы посоветовал вам использовать ng-if, который удалит элемент из формы или вы можете сказать DOM, если условие не удовлетворено. вы получите код

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

Answer 3

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

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

и в контроллере, вы можете установить переменную требуется копаться истина или ложь в вашем Condition1() и/или condition2() функции.

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

Очевидно, что это не пуленепробиваемый код. Но это начало.