ng-disabled in Angular is not working immediately

Question

I am editing the file, here i can change the filename as well as i can add another file for versions, If I have chosen the file, filename edit field should be disabled immediately. I have tried this following code, but its not get disabled until i type something in filename field.

My View code:

 <div class="ipfield">
 <label class="plclabel">Choose file</label>
 <input type="file" class="txt_box" id="newfile" 
 onchange="angular.element(this).scope().fileNameChanged()">
 </div 
 <div class="ipfield" >
 <label class="plclabel">File Name</label>
 <input type="text" class="txt_box" ng-disabled="filechoosen" ng-
 model="filenameedit" id="filenameedit">
 </div>

My app.js

In my controller I have wrote function:

$scope.filechoosen = false
    $scope.fileNameChanged = function() {
      $scope.filechoosen= true
    }

Is there any mistake in my code.

please check the give link [link](https://stackoverflow.com/questions/17922557/angularjs-how-to-check-for-changes-in-file-input-fields) — Arun, Mar 21 '18 at 06:35
I think $scope is not getting update please check the my code in snippet — Arun, Mar 21 '18 at 07:06

score 1 · Answer 1 · answered Mar 21 '18 at 07:05

Can you please try with $scope.$apply() inside the click function

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
 <div class="ipfield">
 <label class="plclabel">Choose file</label>
 <input type="file" class="txt_box" id="newfile" 
 onchange="angular.element(this).scope().fileNameChanged()">
 </div 
 <div class="ipfield" >
 <label class="plclabel">File Name</label>
 <input type="text" class="txt_box" ng-disabled="filechoosen" ng-
 model="filenameedit" id="filenameedit">
 </div>

</div>

</body>
</html>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.filechoosen = false
    $scope.fileNameChanged = function() {
      $scope.filechoosen= true
   $scope.$apply()
    }
});
</script>

as below

Thank you, it's the solution for me. – Kiran Gavhane Dec 14 '22 at 11:35 — Kiran Gavhane, Dec 14 '22 at 11:35

score 0 · Answer 2 · answered Mar 21 '18 at 06:25

0

try ng-change insted of onchange

<input type="file" class="txt_box" id="newfile" 
 onchange="angular.element(this).scope().fileNameChanged()">

to

<input type="file" class="txt_box" id="newfile" 
 data-ng-change="fileNameChanged()">

answered Mar 21 '18 at 06:25

Edison Augusthy

1,535
17
32

Thank you for your response, But its not calling the function, is type="file" allows data-ng-change? – Vishnu Mar 21 '18 at 06:36

Sanket Ghorpade · Answer 3 · 2018-03-21T08:20:13.970

The user @sqren (https://stackoverflow.com/users/434980/sqren) has made a custom directive which will help to solve this since angularjs doesn't have any ng-change support for file.

view.html

<input type="file" custom-on-change="uploadFile">

controller.js:

app.controller('myCtrl', function($scope){
    $scope.uploadFile = function(event){
        var files = event.target.files;
    };
});

directive.js:

app.directive('customOnChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.customOnChange);
      element.on('change', onChangeHandler);
      element.on('$destroy', function() {
        element.off();
      });

    }
  };
});

He has also created a JSFiddle which help you to understand this.

The answer credit goes to @sqren, I am just mentioning it over here.

More information on the actual answer can be seen here - https://stackoverflow.com/a/19647381/1723852

Thank you so much I tried this link and its work perfect https://stackoverflow.com/a/26591042/8240993 — Vishnu, Mar 21 '18 at 07:26
Glad it helped :) Also, if it worked then can you mark this as answer to help others know which solution worked for you. @Vishnu — Sanket Ghorpade, Mar 21 '18 at 08:19

ng-disabled in Angular is not working immediately

3 Answers3