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".
我有一个表单,其中有一个输入字段,这是移动设备的必填字段,但不适用于桌面或平板电脑。如果我添加一个必需的属性并使用桌面中的CSS媒体查询隐藏它仍然是表单。$ valid是false。有角度的方法是确保仅在移动设备中检查所需属性,例如放置ng-required =“mobileOnly”。
Thanks in Advance.
提前致谢。
3 个解决方案
#1
3
Try setting a variable in angular scope to check if it's mobile and then put it into ng-required:
尝试在角度范围内设置变量以检查它是否可移动,然后将其置于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>
#2
3
Using an ng-if
statement on your input element will keep angular from checking for validity when it isn't displayed.
在输入元素上使用ng-if语句将使角度在未显示时检查其有效性。
<input ng-if="!isMobile" type="text" ng-model="model" required />
#3
1
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.
好吧,不是直接的,因为媒体查询和CSS一般都没有以任何方式表示在Model-ViewModel中双向绑定Angular。您需要以某种方式将媒体查询桥接到ViewModel。
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.
可能最简单的路线正是你提出的。使用ng-required =“isMobile”时,只有当isMobile范围变量为true时,才能强制使用该字段。
To actually fill $scope.isMobile
you'd need to read the viewport dimensions, something like this:
要实际填充$ scope.isMobile,您需要读取视口尺寸,如下所示:
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.
如果您在意,还应该监听window.onresize事件以处理调整大小并相应地更新$ scope.isMobile变量。
#1
3
Try setting a variable in angular scope to check if it's mobile and then put it into ng-required:
尝试在角度范围内设置变量以检查它是否可移动,然后将其置于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>
#2
3
Using an ng-if
statement on your input element will keep angular from checking for validity when it isn't displayed.
在输入元素上使用ng-if语句将使角度在未显示时检查其有效性。
<input ng-if="!isMobile" type="text" ng-model="model" required />
#3
1
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.
好吧,不是直接的,因为媒体查询和CSS一般都没有以任何方式表示在Model-ViewModel中双向绑定Angular。您需要以某种方式将媒体查询桥接到ViewModel。
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.
可能最简单的路线正是你提出的。使用ng-required =“isMobile”时,只有当isMobile范围变量为true时,才能强制使用该字段。
To actually fill $scope.isMobile
you'd need to read the viewport dimensions, something like this:
要实际填充$ scope.isMobile,您需要读取视口尺寸,如下所示:
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.
如果您在意,还应该监听window.onresize事件以处理调整大小并相应地更新$ scope.isMobile变量。