Angular Material DatePicker和NG-CHANGE

Question

當用戶在md-datepicker組件上選擇一個日期時，我需要調用服務器來檢查所選日期的時間表。事情是，我不能讓我的函數使用ng-change來觸發，這似乎是這樣做的唯一選擇。任何想法爲什麼這不起作用？

form.html

<div 
    layout-padding> 
    <form 
     name="form" 
     novalidate 
     ng-submit="form.$valid && save()"> 
     <div 
      layout> 
     <md-input-container 
      class="md-block" 
      flex="100"> 
      <label>Nome Completo</label> 
      <input 
       name="fullName" 
       ng-model="costumer.fullName" 
       required 
       disabled/> 
      <div 
       ng-messages="form.fullName.$error"> 
       <div ng-message="required">O cliente não foi específicado</div> 
       </div> 
     </md-input-container> 
     </div> 
     <div 
      layout> 
     <md-input-container 
      flex> 

      <label>Data</label> 
      <md-datepicker 
       name="date" 
       ng-model="appointment.when" 
       md-open-on-focus 
       md-min-date="today"> 

      </md-datepicker> 

      <div 
       ng-messages="form.date.$error"> 
      <div ng-message="valid">Data inválida</div> 
      <div ng-message="mindate">Data anterior à atual</div> 
      </div> 
     </md-input-container> 

     <md-input-container 
      flex="50"> 
      <label>Horário</label> 
      <md-select 
       name="whatTime" 
       ng-model="appointment.whatTime" 
       required> 
       <md-option value="0">08:00 - 09:00</md-option> 
       <md-option value="1">09:00 - 10:00</md-option> 
       <md-option value="2">10:00 - 11:00</md-option> 
       <md-option value="3">13:00 - 14:00</md-option> 
       <md-option value="4">14:00 - 15:00</md-option> 
       <md-option value="5">15:00 - 16:00</md-option> 
       <md-option value="6">16:00 - 17:00</md-option> 
       <md-option value="7">17:00 - 18:00</md-option> 
      </md-select> 

      <div 
       ng-messages="form.whatTime.$error"> 
       <div 
        ng-message="required">Selecione um horário</div> 
      </div> 
     </md-input-container> 
     </div> 
     <md-button 
      type="submit">Confirmar</md-button> 
    </form> 
</div> 

controller.js

angular.module('Application').controller('NewAppointmentController', 
    ['$scope', '$routeParams', 'CostumerService', 'AppointmentService', 
     function($scope, $routeParams, CostumerService, AppointmentService) { 
      console.log('NewAppointmentController init'); 

      console.log('Costumer: ' + $routeParams.costumerId); 

      $scope.today = new Date(); 
      $scope.appointment = {}; 
      $scope.appointment.when = $scope.today; 

      $scope.save = save; 
      $scope.checkSchedule = checkSchedule; 

      CostumerService.getUniqueById($routeParams.costumerId) 
        .then(function(data){ 
         $scope.costumer = data; 
         console.log('Costumer name: ' + data.fullName); 
        }, function(error){ 
         console.log('Erro'); 
        }); 

      function save() { 
       console.log('Clicked'); 

       $scope.appointment.costumer = $scope.costumer; 

       AppointmentService.save($scope.appointment) 
         .then(function(data) { 
          console.log('Saved'); 
         }, function(error){ 
          console.log('Error'); 
         }); 
      } 

      function checkSchedule() { 
       console.log('Changed: '); 
      } 

    }]); 

Answer 1

這似乎爲我工作。看到這個CodePen，ngChange with Datepicker。我添加了

<md-datepicker 
    name="date" 
    ng-model="appointment.when" 
    ng-change="checkSchedule()" 
    md-open-on-focus 
    md-min-date="today"> 
</md-datepicker> 

每次更改日期時，它都會記錄到控制檯。雖然，看起來你應該使用$asyncValidators，如Custom Validation中所述。