Legen Sie das erforderliche Attribut für ein Eingabeelement fest, wenn es nicht ausgeblendet ist.

Question

Ich arbeite an einem dynamischen Formular mit angular.js. Eingänge Feld

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

Ist die Bedingung() false zurückgibt, wird das Eingabefeld nicht angezeigt. Aber auf einem Submit-Button klicken, werde ich auf Chrom erhalten, erscheint die Meldung:

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

Nun, eine Lösung ist, ng-erforderlich zu verwenden:

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

Nun, ich habe hier Code wiederholen, indem Sie mehrmals die Bedingung() verwenden.

Es wird schlecht, wenn man ng-Show verkapselt:

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

Gibt es eine bessere Art und Weise, den erforderlichen Tag soll es sein, wenn der Eingang sichtbar ist, und nicht, wenn es versteckt ist.

Answer 1

Anstelle von ng-show verwenden Sie ng-if, denn wenn Sie ng-show verwenden, ist dieses Element immer noch Teil von DOM.

etwas wie folgt aus:

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

Auf diese Weise können nicht Fehler

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

Answer 2

Ich würde vorschlagen, Sie müssen ng-if verwenden, die das Element aus dem Formular entfernen oder Sie können DOM sagen, wenn die Bedingung nicht erfüllt ist. Sie Code wie

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

Answer 3

One werden Option, um eine Variable zu verwenden ist stattdessen eine Funktion aufzurufen.

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

und in Ihrem Controller, können Sie die isRequired Variable wahr oder falsch in Ihrem condition1() und/oder condition2() Funktionen einstellen.

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

Offensichtlich ist dies kein kugelsicherer Code. Aber es ist ein Anfang.