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>

每次更改日期时，都会将其记录到控制台。虽然，您似乎应该使用Custom Validation中描述的$asyncValidators。

角度材料DatePicker和NG-CHANGE

1 个答案: