1

When a user selects a date on the md-datepicker component, I need to call the server to check the schedule for the selected date. The thing is, I can't get my function to fire using ng-change, which seems to be the only option on doing this. Any thoughts on why this is not working?

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: ');
            }

    }]);

1 Answer 1

5

It seems to work for me. See this CodePen, ngChange with Datepicker. I added

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

Everytime you change the date, it will be logged to the console. Although, it really seems like you should be using $asyncValidators as described in Custom Validation.

Sign up to request clarification or add additional context in comments.

1 Comment

Thank you man. Looks like it was a caching issue ¬¬'' +1 for taking the time to answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.