Doing display none on an input field having a required attribute still makes the form invalid

Question

I have a form which has an input field which is a mandatory field for mobile devices but not for desktop or tablets. If I add a required attribute and hide it using CSS media queries in desktop still the form.$valid is false. Is there a way in angular to ensure the required attribute is checked only in mobile devices like putting a ng-required = "mobileOnly".

Thanks in Advance.

Set disabled attribute on the input to exclude it from the form. — Jeff McCloud, Nov 16 '16 at 19:42

score 3 · Answer 1 · answered Nov 16 '16 at 19:42

Try setting a variable in angular scope to check if it's mobile and then put it into ng-required:

angular.module('app', [])
  .controller('Controller', function($scope) {
    $scope.is_mobile = false;
    if (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        $scope.is_mobile = true;

    }
  })

<!DOCTYPE html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="Controller">
    <form name="myForm" id="myForm">
      <label>Required Field</label>
      <input type="text" ng-model="first" ng-required="true" /><br>
      <label>Required Field for mobile only</label>
      <input type="text" ng-model="second" ng-required="is_mobile" />
    </form><br>
    <b>Form Valid : </b> {{myForm.$valid}}
  </div>
</body>

</html>

[Why is browser sniffing not a recommended practice?](http://stackoverflow.com/questions/661213/why-is-browser-sniffing-not-a-recommended-practice) — NOtherDev, Nov 16 '16 at 19:44
I did the same. Did not want to write a code for this but seems there is no way we can do this without writing a code. — Jyotirmoy Pan, Nov 16 '16 at 20:01

score 3 · Answer 2 · answered Nov 16 '16 at 19:47

3

Using an ng-if statement on your input element will keep angular from checking for validity when it isn't displayed.

<input ng-if="!isMobile" type="text" ng-model="model" required />

answered Nov 16 '16 at 19:47

shanzilla

467
4
16

score 1 · Answer 3 · edited May 23 '17 at 12:13

Well, not directly, because media queries and CSS in general are not represented in any way in Model-ViewModel two way binding of Angular. You'd need to bridge your media queries to your ViewModel somehow.

Probably the easiest route is exactly what you've proposed. With ng-required="isMobile" you can have the field mandatory only when isMobile scope variable is true.

To actually fill $scope.isMobile you'd need to read the viewport dimensions, something like this:

var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
$scope.isMobile = width < 767; 
// or whatever your mobile breakpoint value in px is

If you care, you should also listen to window.onresize event to handle resizes and update the $scope.isMobile variable accordingly.

Doing display none on an input field having a required attribute still makes the form invalid

3 Answers3