AngularJS - Custom Custom Validation - проверка наличия хотя бы одного входа

Учитывая простую форму html, например:

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

Мне нужна ваша помощь, чтобы узнать, как проверить время проверки, если хотя бы один из входов пуст. Требуемая проверка является следующей. Пользователь должен заполнить хотя бы один предпочтительный вариант.

Используя jQuery this:

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

Работает нормально, но хотелось бы выяснить, как сделать то же самое, используя angular.

Большое спасибо заранее,

Гильермо

Ответ 1

Итак, идея состоит в том, чтобы отключить кнопку отправки, если все входы пустые. Вы можете сделать это

<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 - заставить преобразовать str в значение boolean. И как !!null, так и !!"" оцениваются как false.

Демо

Ответ 2

Мое решение было следующим:

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

Вы применяете этот метод к data-ng-required в каждом из входов...

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

И последний бит, который я применил, заключался в том, чтобы отключить кнопку с помощью простого myForm.$invalid

Ответ 3

Вы можете установить "обязательный" в элементах ввода и стиле/коде, как вы хотите обрабатывать с помощью $valid формы. Проверьте http://dailyjs.com/2013/06/06/angularjs-7/