Question

我的表单有一个输入字段，这是移动设备的必填字段，但不适用于桌面或平板电脑。如果我添加一个必需的属性并使用桌面中的CSS媒体查询隐藏它仍然是表单。$ valid是false。有角度的方法是确保仅在移动设备中检查所需属性，例如放置ng-required =＆＃34; mobileOnly＆＃34;。

先谢谢。

Answer 1

尝试在角度范围内设置变量以检查它是否可移动，然后将其置于ng-required中：

＆＃13;

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;

    }
  })

＆＃13;

<!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>

＆＃13;

Answer 2

在输入元素上使用b =语句将保持角度不会在未显示时检查有效性。

ng-if

Answer 3

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

可能最简单的路线正是您提出的。使用ng-required="isMobile"时，只有当isMobile范围变量为true时，才能强制使用该字段。

要实际填写$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变量。

在具有必需属性的输入字段上执行无显示仍然会使表单无效

3 个答案: