Query about ng-disabled in Angular JS

Question

<div ng-app="myApp" ng-controller="myCtrl">
<button type="submit" class="btn btn-primary pull-left" ng- 
disabled="captchaError">Submit</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.captchaError = true;                         
});
</script>

Here is my code. I set captcha error to true and it disabled the button. My question is when this page will run and if user inspect that button and remove disabled="disabled" from the element then the button will start working. Is there any way to prevent this and button will not start working on removing disabled="disabled"

Yes it will start working , Another workaround is to check the value of `$scope.captchaError` inside the function also which is called when button is clicked. Though the value of `$scope.captchaError` can also be modified from console itself. — Atul Sharma, May 15 '18 at 05:58
Unfortunately, there is no way to prevent this. User is free to modify the DOM using developer tools, and AngularJS won't prevent it from doing this. Note that user is free to modify your JavaScripts as well. That's why a server side validation is recommended everywhere. — 31piy, May 15 '18 at 05:58

Ramesh Rajendran · Accepted Answer · 2018-05-15T06:29:45.613

You can disable the f12(most of the users are doing)key on the screen or disable the prevent option.

How can I block F12 keyboard key in jquery for all my pages and elements?

Note: But still you can't control it because Users can also edit the elements by using these below ways as well.

If the user press Control+shift+i -> It opens developer panel .
Top right square in chrome -> More tools -> Developer tools ,it opens

So the better way is , you can use ng-if to restrict to create DOM elements instead of disabling.

The ng-if directive removes the HTML element if the expression evaluates to false

<button type="submit" class="btn btn-primary pull-left" ng- 
if="!captchaError">Submit</button>

Query about ng-disabled in Angular JS

1 Answers1