在具有必需属性的输入字段上没有显示任何内容仍然使表单无效

我有一个表单，其输入字段是移动设备的必填字段，但不适用于桌面或平板电脑。如果我添加一个必需的属性并在桌面上仍然使用CSS媒体查询来隐藏它，则$ valid为false。有没有一种方法可以确保仅在移动设备中检查所需的属性，如放置ng-required =“mobileOnly”。在具有必需属性的输入字段上没有显示任何内容仍然使表单无效

在此先感谢。

来源

2016-11-16 Jyotirmoy Pan

在输入上设置禁用属性以将其从表单中排除。 –

尝试在角范围内设置一个变量来检查它是否移动，然后把它变成NG-要求：

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>

来源

2016-11-16 19:42:43

[为什么浏览器嗅探不是推荐的做法？]（http://stackoverflow.com/questions/661213/why-is-browser-sniffing-not-a-recommended-practice） – NOtherDev

是的，你可以做到这一点，但这是更容易实现 –

我也一样。不想为此编写代码，但似乎没有办法在没有编写代码的情况下做到这一点。 –

哦，不是直接的，因为在一般媒体查询和CSS在Angular的Model-ViewModel双向绑定中没有以任何方式表示。您需要以某种方式将您的媒体查询桥接到您的ViewModel。

也许最简单的路线就是你所提出的。使用ng-required="isMobile"只有当isMobile范围变量为真时，您才可以使该字段成为必填字段。

要真正填补$scope.isMobile你需要read the viewport dimensions，这样的事情：

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

如果你愿意，你也应该听window.onresize事件来处理尺寸并相应地更新$scope.isMobile变量。

来源

2016-11-16 19:43:34 NOtherDev

在您的输入元素上使用ng-if声明将不会显示时对有效性进行检查。

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

来源

2016-11-16 19:47:14 shanzilla

这是很好的答案并不麻烦的角引擎很多。 –

在具有必需属性的输入字段上没有显示任何内容仍然使表单无效

回答

相关问题