AngularJS - Mẫu Tuỳ chỉnh Validation - Kiểm tra nếu ít nhất một đầu vào là trống

Question

Cho sẵn dạng html đơn giản như thế này:

<form name="myForm" action="#sent" method="post" ng-app> 
    <input name="userPreference1" type="text" ng-model="shipment.userPreference" /> 
    <input name="userPreference1" type="text" ng-model="shipment.userPreference" /> 
    <input name="userPreference1" type="text" ng-model="shipment.userPreference" /> 
... submit input and all the other code... 
</form> 

tôi cần sự giúp đỡ của bạn để biết làm thế nào để kiểm tra đúng thời hạn xác nhận, nếu ít nhất một trong các đầu vào trống. Xác nhận mong muốn là như sau. Người dùng phải hoàn thành ít nhất một tùy chọn.

Sử dụng jQuery này:

if ($("input").val() == "") { 

trình ok, nhưng muốn tìm ra cách để làm điều tương tự sử dụng góc.

Cảm ơn rất nhiều trước,

Guillermo

Answer 1

Vì vậy, ý tưởng là để vô hiệu hóa nút gửi nếu tất cả các yếu tố đầu vào trống. Bạn có thể làm như thế này

<form name="myForm" action="#sent" method="post" ng-app> 
    <input name="userPreference1" type="text" ng-model="shipment.userPreference1" /> 
    <input name="userPreference1" type="text" ng-model="shipment.userPreference2" /> 
    <input name="userPreference1" type="text" ng-model="shipment.userPreference3" /> 

    <button type="submit" ng-disabled="!(!!shipment.userPreference1 || !!shipment.userPreference2 || !!shipment.userPreference3)">Submit</button> 
</form> 

!!str là để buộc để chuyển đổi str đến một giá trị boolean. Và cả hai !!null và !!"" được đánh giá là false.

Demo

Answer 2

Bạn có thể thiết lập các "yêu cầu" trong các yếu tố đầu vào và phong cách/code như thế nào bạn muốn xử lý với $ giá trị của một biểu mẫu. Kiểm tra http://dailyjs.com/2013/06/06/angularjs-7/

Answer 3

Giải pháp của tôi đã được như sau:

 $scope.requiredInputsGroup = function() { 
      var isRequired = true; 
      if (!$scope.shipment) { 
       return true; 
      } 
      angular.forEach(["userPreference1", "userPreference2", "userPreference3"], function (input) { 
       if ($scope.shipment[input]) { 
        isRequired = false; 
        return false; 
       } 
      }); 

      return isRequired; 
     }; 

Bạn áp dụng phương pháp đó để một data-ng-required ở mỗi đầu vào ...

<form name="myForm" action="#sent" method="post" ng-app> 
    <input name="userPreference1" type="text" ng-model="shipment.userPreference1" ng-required="requiredInputsGroup()" /> 
    <input name="userPreference2" type="text" ng-model="shipment.userPreference2" ng-required="requiredInputsGroup()" /> 
    <input name="userPreference3" type="text" ng-model="shipment.userPreference3" ng-required="requiredInputsGroup()" /> 

    <button type="submit" ng-disabled="myForm.$invalid">Submit</button> 
</form> 

Và các bit cuối cùng tôi áp dụng là làm cho nút bị vô hiệu hóa với một đơn giản myForm.$invalid