AngularJS: Deaktivieren Sie die Schaltfläche, wenn die Eingabefelder leer sind

Question

Ich habe ein Dropdown-Menü, zwei Eingabetextfeld und eine Schaltfläche zum Senden. Ich möchte, dass die Senden-Schaltfläche deaktiviert wird, bis das Dropdown-Element ausgewählt ist und beide Eingabefelder ausgefüllt sind. Ich habe mir einige Beispiele angesehen, einschließlich this one und this one, aber keine davon funktioniert für mich. Unten ist mein Code. Dank

<form name="myForm"> 
    Select an option: 
    <select id="dropDown" name="dropDown" ng-model="data.dropDown" > 
    ** content for dropDown menu, populating it by using Django 
    </select> 
    From Date: 
    <input type="text" id="dateFrom" ng-model="data.date1" /> 
    To Date: 
    <input type="text" id="dateTo" ng-model="data.date2" /> 

    <button id="submit" ng-click="submitRequest()" ng-disabled="!(!!data.dropDown && !!data.date1 && !!data.date2)">Submit </button> 
</form> 

Ich habe versucht, diese Methode auch unter:

<form name="myForm"> 
    Select an option: 
    <select id="dropDown" name="dropDown" ng-model="data.dropDown" > 
    ** content for dropDown menu, populating it by using Django 
    </select> 
    From Date: 
    <input type="text" id="dateFrom" ng-model="data.date1" required/> 
    To Date: 
    <input type="text" id="dateTo" ng-model="data.date2" required /> 
    <button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit </button> 
</form> 

wenn also zunächst die Seite geladen wird und alle Felder standardmäßig leer sind, ist die Submit Taste deaktiviert, und das Problem ist, dass nach allen drei Feldern sind gefüllt, es wird nicht aktiviert. Dank

Answer 1

Ihre zweite Methode funktioniert für mich (unter Verwendung myForm. $ Ungültig) wenn ich required zum Dropdown-Element hinzufüge. Ich habe eine Plunkr erstellt, die du mit here spielen kannst.

<form name="myForm"> 
    Select an option: 
    <select id="dropDown" name="dropDown" ng-model="data.dropDown" required> 
    <option>red</option> 
    <option>blue</option> 
    <option>green</option> 
    </select><br/> 
    From Date: 
    <input type="text" id="dateFrom" ng-model="data.date1" required/><br/> 
    To Date: 
    <input type="text" id="dateTo" ng-model="data.date2" required /><br/> 
    <button id="submit" ng-click="submitRequest()" ng-disabled="myForm.$invalid">Submit</button> 
</form> 

Hinweis: Früher habe ich Angular 1.4 im plunkr, da Sie nicht mit, welche Version von Angular Sie arbeiten angegeben haben.

Bearbeiten: OP angegeben, dass das Problem mithilfe von JQuery Datepicker erstellt wurde. Darf ich vorschlagen eckig-ui boostrap datepicker zu verwenden? Plunker example - Angular-UI Bootstrap docs

Answer 2

Warum nicht Sie verwenden ng-disabled="myForm.myName.$pristine" weil ursprünglich für jede Variable in Textfelder eingefügt prüfen wird

bitte hier kleines Beispiel überprüfen .. ng pristine example