Set necessaria attributo per un elemento di input, se non è nascosto

Question

Sto lavorando a una forma dinamica utilizzando angular.js. Ingressi campo

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

Se la condizione() restituisce false, non viene fornita campo di immissione. Ma facendo clic su un pulsante di invio, vado a prendere su Chrome, il messaggio:

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

Beh, una soluzione è, per usare ng-richiesta:

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

Beh, qui ho per ripetere il codice, usando la condizione() più volte.

Diventa male, quando si può incapsulato di ng-show:

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

C'è un modo migliore, il tag richiesto dovrebbe essere lì quando l'ingresso è visibile, e non, se è nascosto.

Answer 1

Invece di usare ng-spettacolo, l'uso ng-se, perché quando si utilizza ng presentazione allora che elemento è ancora parte del DOM.

qualcosa di simile:

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

In questo modo non sarà possibile ottenere l'errore

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

Answer 2

Ti suggerisco di utilizzare ng-if che rimuoverà l'elemento dal modulo o puoi dire DOM se la condizione non è soddisfatta. il tuo codice diventerà come

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

Answer 3

Un'opzione consiste nell'utilizzare una variabile anziché chiamare una funzione.

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

e nel controllore, è possibile impostare la variabile IsRequired alle funzioni vere o false nel vostro condizione1() e/o condizione2().

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

Ovviamente questo non è un codice a prova di proiettile. Ma è un inizio.