how to call any function in input type text in angularjs?

Question

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>

Answer 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();
  }
});

Answer 2

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

Answer 3

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