2016-03-26 8 views
0

Ich habe meine erste Richtlinie in Angular geschrieben, die ein Drop-Down ist, hier ist die Vorlage:Herstellung Dropdown-Richtlinie in Angular erforderlich

<select class='form-control' ng-model='vm.scope.fixtureToBeUpdated.awayTeam' ng-options='awayTeam.teamName for awayTeam in vm.scope.awayTeams track by awayTeam.teamId' required> 
    <option style='display: none' value=''>{{'SELECT' | translate }}</option> 
</select> 

Hier ist, wo sie in der Steuerung definiert:

function awayTeamsDropdown() { 

     return { 
      restrict: "E", 
      scope: true, 
      controller: "fixturesController", 
      templateUrl: "/views/awayteamsDropdown.html" 
     }; 
    } 

Und hier ist die Form, die sie in verwendet:

<form novalidate id="AddUpdateFixture" name="AddUpdateFixture" ng-submit="vm.addUpdateFixture()"> 

         <!--addFixture or updateFixture--> 
         <div class="form-group"> 
          <input type="hidden" ng-model="vm.scope.fixtureToBeUpdated.fixtureId"/> 
         </div> 
         <div class="form-group"> 
          <label for="tournament">{{ 'TOURNAMENT' | translate }}</label> 
          <tournaments-dropdown></tournaments-dropdown> 
         </div> 
         <div class="form-group"> 
          <label for="week">{{ 'WEEK' | translate }}</label> 
          <weeks-dropdown></weeks-dropdown> 
         </div> 
         <div class="form-group"> 
          <label for="awayTeamName">{{ 'AWAY_TEAM' | translate }}</label> 
          <awayteams-dropdown></awayteams-dropdown> 
         </div> 
         <div class="form-group"> 
          <label for="awayTeamScore">{{ 'POINTS' | translate }}</label> 
          <input id="awayTeamScore" type="text" class="form-control" name="awayTeamScore" 
            ng-model="vm.scope.fixtureToBeUpdated.awayTeamScore" ng-min="0" ng-max="77" /> 
          <span ng-show="AddUpdateFixture.awayTeamScore.$dirty && AddUpdateFixture.awayTeamScore.$error.min" class="text-warning">{{ 'SCORE_MIN' | translate }}</span> 
          <span ng-show="AddUpdateFixture.awayTeamScore.$dirty && AddUpdateFixture.awayTeamScore.$error.max" class="text-warning">{{ 'SCORE_MAX' | translate }}</span> 
         </div> 

         <div class="form-group"> 
          <button type="submit" ng-disabled="AddUpdateFixture.$invalid" class="button bg-darkBlue bg-active-darkBlue fg-white">{{ 'SAVE' | translate }}</button> 
         </div> 
        </form> 

Aber in der Schaltfläche in Form ng-di sabled wird auf "false" gesetzt, auch wenn im Drop-down-Menü kein Element ausgewählt ist. Wie kann ich ng-disabled auf "true" setzen, wenn im Drop-down-Menü nichts ausgewählt ist?

+0

Basierend auf [diese Antwort] (http://stackoverflow.com/ a/27501281/548997) Es sieht so aus, als müssten Sie Code schreiben, um die Validierungseigenschaften manuell festzulegen. – Lex

+0

Mögliches Duplikat von [erforderlich bei benutzerdefinierter Anweisung auswählen] (http://stackoverflow.com/questions/27500913/required-on-custom-directive-select) – Lex

+0

Gibt es Hinweise darauf, wie ich dieses Beispiel in diesem Fall anwenden könnte? – user517406

Antwort

0

Probieren Sie diese

<div class="form-group"> 
    <button type="submit" ng-disabled="vm.scope.fixtureToBeUpdated.awayTeam === undefined" class="button bg-darkBlue bg-active-darkBlue fg-white">{{ 'SAVE' | translate }}</button> 
</div> 

Oder

ng-disabled="!vm.scope.fixtureToBeUpdated.awayTeam" 
+0

Danke, aber ich habe viele andere Felder (beide Direktiven und nicht) mit verschiedenen Validierungen, die auch den Wert von ng-disabled bestimmen, so dass dieser Ansatz sehr kompliziert werden könnte, da jede dieser Feldvalidierungen in enthalten sein müsste die gleiche Weise – user517406

+0

Ah, weil Ihre Qs dann ist es nicht klar, "Wie mache ich ng-deaktiviert auf True gesetzt, wenn nichts in der Dropdown-Liste ausgewählt ist (und Sie eine der Dropdown-Listen zur Verfügung gestellt)", während Sie scheinen, mehrere Dropdowns haben – Bettimms

+0

Um dies zu lösen, fügen Sie zu jedem Dropdown-Menü den ersten als leeren Wert ein, damit require funktioniert. – Bettimms

0

Wie wäre es mit ng-required:

<select class='form-control' ng-model='vm.scope.fixtureToBeUpdated.awayTeam' ng-options='awayTeam.teamName for awayTeam in vm.scope.awayTeams track by awayTeam.teamId' ng-required="vm.scope.fixtureToBeUpdated.awayTeam"> 
    <option style='display: none' value=''>{{'SELECT' | translate }}</option> 
</select> 
Verwandte Themen