Проверка формы с помощью нокаута

Question

Я использую knockoutJS в своем проекте. Ниже приведен фрагмент кода:

<input class="form-control" id="name" type="text" style = "width:100%" placeholder = "Enter name" data-bind="event:{keyup: checkDetails}"> 

<select class="form-control" id="type" style = "width:100%"> 
     <option>Type 1</option> 
     <option>Type 2</option> 
     <option>Type 3</option> 
     <option>Type 4</option> 
</select> 

<input class="form-control" id="date" type="date" style = "width:100%" data-bind="event:{click: checkDetails}"> 

<button type="button" class="btn btn-primary" id = "add_goal" data-bind = "enable:formFilled">Add Goal</button> 

<script type="text/javascript"> 
     function myViewModel() { 
      var self = this; 
      self.formFilled = ko.observable(false); 
      self.checkDetails = function(){ 
       console.log("hello"); 
       if($("#name").val() != "" && $("#date").val() != ""){ 
        self.formFilled = ko.observable(true); 
       } 
      }; 
      console.log(self.formFilled()); 
     } 
     ko.applyBindings(new myViewModel()); 
</script> 

Есть три поля, и я хочу, чтобы активировать кнопку «Добавить цель» только тогда, когда все поля заполнены. Есть сомнения: какое событие следует добавить к календарю HTML5 и почему кнопка не активируется, когда я устанавливаю ее в true внутри функции «checkDetails».

Answer 1

formFilled является наблюдаемым, поэтому вам необходимо установить его как функцию.

if($("#name").val() != "" && $("#date").val() != ""){ 
    self.formFilled(true); 
} 
else { 
    self.formFilled(false); 
} 

Кроме того, ваш data-bind="event:{click: checkDetails}"> ищет события щелчка, я думаю, это должно измениться на keyup.