ng-disabled and form validation

2
votes

When using angular's (1.5) forms support, I would expect that when a field is disabled, it should not be marked as invalid, because the user cannot possibly change the value.

However, as seen in the plunker below, where a field is required, but can be switched from enabled to disabled and visa versa by the checkbox, the form validation result does not change, the whole form is still invalid, although the value cannot be changed if the field is disabled.

http://plnkr.co/edit/OMZkoPgPZcHjO67JF88c?p=preview

Together with showing validation messages and submitting the form this poses a problem in UX and flexibility to use the angular validations to determine the state of the form and if it is ok to "submit it" (send AJAX to the server).

(the code below is in the plunker, I just pasted it here, because the code is required when linking plunker)

<form name="vm.form" novalidate>
  <input ng-model="vm.model" ng-disabled="vm.disabled" required />
  <label><input type="checkbox" ng-model="vm.disabled" />Disable field</label>
</form>
Form is invalid: {{vm.form.$invalid}}
2
angularjs
use $dirty you can check whether the field is edited or not - Rajat Bhadauria
if the ng-disabled is dynamic, than it does not matter, imagine: the user edits the field, then he chooses some other options that makes the field disabled, so it is invalid and dirty at the same time, on top of that disabled, and it still invalidates the whole form - redhead
so the thing you are asking is that when you disable the field angularJS should not validate it ?? - Rajat Bhadauria
and it should mark the form as valid ? - Rajat Bhadauria
yes, for me that is a reasonable behavior, because the field cannot be possibly changed by the user when it is disabled. So why should it be validated, why couldn't the user submit the form, why should the validation messages be present... - redhead

2 Answers

0
votes

Ok preety much here you dont normally do ng-disabled on the fields just on like the submit button as shown:

  <input ng-model="vm.model" ng-minlength="4" ng-required="true"/>
  <label><input type="checkbox" ng-model="vm.disabled" ng-required="true"/>Disable field</label>
  <br><input type="submit" ng-disabled="vm.form.$invalid"/>
</form>
Form is invalid: {{vm.form.$invalid}}
</body>
</html>

Now if you try this it will work correctly as shown in Plunker.

0
votes

you can manipulate the value of ng-required value based on whether the checkbox value is checked or not

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="[email protected]" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Asd as vm">
    <form name="vm.form" novalidate>

      <input ng-model="vm.model" ng-disabled="vm.checkbox" ng-required="vm.checkbox===false" />
      <label><input type="checkbox" ng-model="vm.checkbox" />Disable field</label>
    <input  ng-model="vm.other" required/>
    </form>
    Form is invalid: {{vm.form.$invalid}}

  </body>

</html>