动态按钮启用基于错误组的knockout js

Question

我有一个文本框和一个按钮。当文本框为空时，我需要禁用该按钮，当我开始在文本框中输入内容时，我希望启用该按钮。

目前，在文本框中输入一些文本后，当我将焦点移出文本框时，该按钮就会启用。但是我希望在文本框不为空时启用它。我正在使用 knockout.js 并且我的文本框和按钮都是可观察的。我有不超过 1 个文本字段，如果所有字段都不为空，我想启用。如果有任何字段为空，并且没有失去焦点，我想禁用该按钮这是我的代码：

var email = ko.observable({ emailField: ko.observable().extend({ email:
true, required: { param: true, message: FILL_FIELD } })), enableButton
 = ko.observable(), errorGroup = ko.validation.group([emailField]);

<input type="text" data-bind="value:emailField" />
<button data-bind="enable: enableButton>Press Next to enter password</button>

Answer 1

您有两个选择：

KO 3.2.0 及更高版本使用textInput；或者
对于较低版本，请将 value 与 valueUpdate: 'afterkeydown' 一起使用；

两者都确保您的视图模型在按键后立即更新，级联到其他绑定，例如 enable。

Answer 2

使您的问题复杂化的是您正在进行验证，并且您希望验证等到焦点退出，因此随着您的键入不断更新值不是解决方案。

相反，您可以单独观看 input 事件，以跟踪哪些必填字段为空。 watchForEmpty 是一个接受可观察对象和 returns 一个 Knockout 事件处理程序的工厂。它设置空列表的初始状态，事件处理程序维护它。当空列表没有条目时启用该按钮。

vm = {
  empties: ko.observableArray(),
  thing: ko.observable('prefilled'),
  thing2: ko.observable(),
  watchForEmpty: function(observable) {
    var initVal = observable();
    if (initVal === '' || initVal === undefined) {
      vm.empties.push(observable);
    }
    return function(context, event) {
      var el = event.target;
      if (el.value === '') {
        vm.empties.push(observable);
      } else {
        vm.empties.remove(observable);
      }
    };
  }
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="value: thing, event: {input: watchForEmpty(thing)}" />
<input data-bind="value: thing2, event: {input: watchForEmpty(thing2)}" />
<button data-bind="enable: empties().length === 0">Go</button>
<div data-bind="text: thing"></div>
<div data-bind="text: thing2"></div>

动态按钮启用基于错误组的knockout js

Dynamic button enable knockout js based on error group

javascript

knockout.js

knockout-validation