在具有必需屬性的輸入字段上沒有顯示任何內容仍然使表單無效

我有一個表單，其輸入字段是移動設備的必填字段，但不適用於桌面或平板電腦。如果我添加一個必需的屬性並在桌面上仍然使用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

這是很好的答案並不麻煩的角引擎很多。 –

在具有必需屬性的輸入字段上沒有顯示任何內容仍然使表單無效

回答

相關問題