Disabling button when data entered is not in database

Question

What will be the best way to keep “Save” button disable until a valid Instruction Text is entered? I tried using ng-disable on “Save” button but it become activated once I put something in the input field.

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

There is a typo in your 'Save' button: you wrote ng-disable instead of ng-disabled. It should work once fixed, as you update the value of $scope.validInstructionText in your http callback.

Once thing though (I do not know if it is possible in your case, but...): I think it could be good to avoid making a server call (ie. an http request) each time the user wants to save. You could make the call only once behind the scene (on controller init for instance), save the result in a the $scope, then use it for validation. It would be faster that way.

Also, your input ngDisabled directive looks for the expression $scope.trueand not the boolean true. As $scope.true is undefined it is evaluated as falsy, so you will never be able to disable it. There is more info in the Angular docs about ngDisabled if you need it.