Deaktivierungstaste, wenn die eingegebenen Daten nicht in der Datenbank sind

Question

Wie wird die Schaltfläche "Speichern" am besten deaktiviert, bis ein gültiger Befehlstext eingegeben wird? Ich habe versucht, ng-disable auf "Speichern" -Button, aber es wird aktiviert, sobald ich etwas in das Eingabefeld eingeben.

HTML

<div class="row" ng-init="initUpsert()"> 
    <div class="input-field col m4"> 
    <label class="active" for="instructionText">Instruction Text</label> 
    <autocomplete 
     ng-if="!currentQuestion.id || currentQuestion.status === 'flagged'" 
     ng-model="currentQuestion.Instruction.instructionText" 
     data="instructionChoices" 
     attr-placeholder="Instruction Text" 
     attr-input-class="validate" 
     attr=id="instructionText" 
     on-type="getRemoteInstructions" 
     on-select="checkInstructionText" 
     autocomplete-required="true"></autocomplete> 
    <input ng-if="currentQuestion.id && currentQuestion.status !== 'flagged'" type="text" ng-model="currentQuestion.Instruction.instructionText" ng-disabled="true"> 
    </div> 
    <button class="modal-action waves-effect btn waves-green teal white-text btn-flat" ng-click="spellcheck(true)" ng-show="currentQuestion.status === 'review' && isModified === true"> 
    Save and Add Another 
    </button> 

    <button class="modal-action waves-effect btn waves-green teal white-text btn-flat" ng-click="spellcheck(false)" ng-show="currentQuestion.status === 'review' && isModified === true" ng-disable="invalidInstructionText"> 
     Save 
    </button> 

    </div> 
    <ng-include src="'/views/modals/spellCheckModal.html'"></ng-include> 
</div> 

-Controller

$scope.checkInstructionText = function(instruction) { 
    $scope.validInstructionText = true; 
    $http.get("/api/instructions?searchInstructionText=" + instruction).then(function(response) { 
    if (instruction = response.data) { 
     window.alert ("You've selected a valid instruction text"); 
     return $scope.validInstructionText = false; 
    } 
    else { 
     console.log("disable the save buttons"); 
     return $scope.validInstructionText = true; 
    } 
    }); 
}; 

Answer 1

Es gibt einen Tippfehler in Ihrem 'Speichern' ist Taste: Sie ng-disable stattschrieb. Es sollte einmal funktionieren, wenn Sie den Wert $scope.validInstructionText in Ihrem http-Callback aktualisieren.

Einmal Sache (Ich weiß nicht, ob es in Ihrem Fall möglich ist, aber ...): Ich denke, es wäre gut zu vermeiden, einen Server-Aufruf (dh eine http-Anfrage) jedes Mal, wenn der Benutzer will speichern. Sie können den Aufruf nur einmal hinter der Szene machen (zum Beispiel auf der Controller-Init), das Ergebnis in einem $ scope speichern und zur Validierung verwenden. Es wäre schneller so.

Auch Ihre Eingabe ngDisabled-Direktive sucht nach dem Ausdruck $scope.true und nicht nach dem booleschen true. Da nicht definiert ist, wird es als falsy ausgewertet, sodass Sie es nie deaktivieren können. Es gibt mehr Informationen in der Angular Docs über ngDisabled, wenn Sie es brauchen.

Answer 2

ng-click="invalidInstructionText? spellcheck(false) : return" 

versuchen, dass