当输入的数据不在数据库中时禁用按钮

Question

在输入有效的说明文本之前保持“保存”按钮禁用的最佳方法是什么？我尝试在“保存”按钮上使用 ng-disable，但一旦我在输入字段中输入内容，它就会被激活。

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>

控制器

$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

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

试试看

Answer 2

您的 'Save' 按钮有错别字：您写的是 ng-disable 而不是 ng-disabled。一旦修复，它应该可以工作，因为您在 http 回调中更新了 $scope.validInstructionText 的值。

不过有一次（我不知道你的情况是否可行，但是......）：我认为最好避免每次用户都进行服务器调用（即 http 请求）想要保存。您可以只在后台调用一次（例如在控制器初始化上），将结果保存在 $scope 中，然后将其用于验证。这样会更快。

此外，您的输入 ngDisabled 指令查找表达式 $scope.true 而不是布尔值 true。由于 $scope.true 未定义，它被评估为 falsy，因此您永远无法禁用它。如果您需要，Angular 文档中有关于 ngDisabled 的更多信息。

当输入的数据不在数据库中时禁用按钮

Disabling button when data entered is not in database

html

javascript

autocomplete

angularjs

angularjs-ng-disabled