2

I have given 2 input text for time selection(FROM and TO) and one button to submit. Initially my button is disabled that means whenever user edit on time FROM and TO my button get enabled. My function name is enable().Below is my code in which I have shown FROM to TO only. I need to call enable() on input or md-input-container. 

  <md-content class=" pad-hori-27 margin-left66" ng-if="!contactDetails.isAllTime">
    <div>
      <md-input-container>
        <label>From Time</label>
        <input mdc-datetime-picker="" date="false" time="true" type="text" id="time2" placeholder="Time" min-date="minDate" format="HH:mm a" ng-model="contactDetails.timePeriod.fromTime" class=" md-input">
      </md-input-container>

      <md-input-container>
        <label>To Time</label>
        <input mdc-datetime-picker="" date="false" time="true" type="text" id="time2" placeholder="Time"  min-date="minDate" format="HH:mm a" ng-model="contactDetails.timePeriod.toTime" class=" md-input">
      </md-input-container>
    </div>
  </md-content>
Improve this question
6
  • why don't use form validation to this? Commented Mar 6, 2017 at 11:17
  • @hadiJz Thanks for your reply. I'm not using these fields in form. These are in List. Commented Mar 6, 2017 at 11:18
  • ok. so use in second input ng-change="enable()" Commented Mar 6, 2017 at 11:20
  • I tried ng-change and ng-click. both not working in my case. Commented Mar 6, 2017 at 11:20
  • use ng-change="enable()", and add some log in your enable() function so you can know if its calling your enable() function. Commented Mar 6, 2017 at 11:24

3 Answers 3

Reset to default
1

You need ng-change attribute for this

<input mdc-datetime-picker="" md-select="enable()" date="false" time="true" type="text" id="time2" placeholder="Time" min-date="minDate" format="HH:mm a" ng-model="contactDetails.timePeriod.fromTime" class=" md-input">

you can create a watch on collection like this:

$scope.$watch('contactDetails.timePeriod.fromTime', function(newValues, oldValues){
  if(newValues != oldValues) {
    $scope.enable();
  }
});
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I tried ng-change and ng-click. both not working in my case
I have updated my answer replaced ng-change with md-select, may be this will work.
I tried to appy $watch but didn't understand how ? I possible can you please give small code.I want to understand $watch Thank you.
watch takes two parameters, first model-name as string and second callback function with new and old value. whenever model change its trigger automatically.
Thank you so much for your ans. If i add this code in my controller then it will work or I will need to do call or something else ?
0

you can call function with the help of ng-change or ng-click directive

like as

<input mdc-datetime-picker="" ng-change="enable()" date="false" time="true" type="text" id="time2" placeholder="Time" min-date="minDate" format="HH:mm a" ng-model="contactDetails.timePeriod.fromTime" class=" md-input">

but In place of call function to enable button you can you angular js form validation https://docs.angularjs.org/guide/forms

Improve this answer

1 Comment

I tried ng-change and ng-click. both not working in my case.
0

I am not sure you need to call enable at each change the input. Instead, use ng-disabled on your button, providing a function testing that FROM and/or TO are filled.

If you really need to call enable on change, use ng-change.

EDIT (to detail the solution) For what it's worth, here is what I suggested. 

angular.module('changeExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.value = '';
    $scope.disable = function() {
      return $scope.value === '';
    };
  }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="changeExample">
  <div ng-controller="ExampleController">
    <input type="value" ng-model="value" id="ng-change-example1" />
    <button ng-disabled="disable()">Submit</button>
    <p>
      Value is "{{value}}" (activated: {{!disable()}})
    </p>
  </div>
 </div>

Note that this is a standard way to do it with Angular, instead of rely on $watch as suggested.

Cheers

Improve this answer

1 Comment

Thanks for your reply. but I tried ng-change and ng-click. both not working in my case

Your Answer

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