Form validation - Required one of many in a group

后端 未结 8 1210
时光取名叫无心
时光取名叫无心 2020-12-05 18:31

In the project I\'m working on at the moment I currently have three textboxes and I need to validate that at least one of the text boxes has been populated.

I\'ve be

8条回答
  •  挽巷
    挽巷 (楼主)
    2020-12-05 19:25

    Ran into this same problem last week; ExpertSystem's solution was a good start, but I was looking for a few enhancements to it:

    • Use Angular 1.4.3
    • Use ngMessages

    I eventually wound up with this example on JSFiddle - hope that helps inspire others in the same boat! Relevant JS code from the Fiddle:

    var app = angular.module('myApp', ['ngMessages']);
    app.controller('myCtrl', function ($scope) {
        $scope.sendMessage = function () {
            $scope.myForm.$submitted = true;
    
            if ($scope.myForm.$valid) {
                alert('Message sent !');
            }
        };
    });
    
    app.directive('requiredAny', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function postLink(scope, elem, attrs, ctrl) {
                // If there is no 'ngModel' or no groupName has been specified,
                // then there is nothing we can do
                if (!ctrl || !attrs.requiredAny) { return };
    
                // If this is the first time we've used this directive in this scope,
                // create a section for it's data. If you need / want to make use of
                // an isolate scope you'll need to make 'var groups' scoped to the directive;
                // but then you may want to look in to clearing out group entries yourself
                if (!scope.__requiredAnyGroups) {
                    scope.__requiredAnyGroups = {}
                }
                var groups = scope.__requiredAnyGroups;
    
                // Create a bucket for this group if one does not yet exist
                if (!groups[attrs.requiredAny]) {
                    groups[attrs.requiredAny] = {};
                }
                var group = groups[attrs.requiredAny];
    
                // Create the entry for this control
                group[attrs.ngModel] = {
                    ctrl: ctrl,
                    hasValue: false
                };
    
                ctrl.$validators.requiredAny = function(view, value) {
                    var thisCtrl = group[attrs.ngModel],
                            ctrlValue = (typeof value !== 'undefined') && value,
                            oneHasValue = false;
    
                    thisCtrl.hasValue = ctrlValue;
    
                    // First determine if any field in the group has a value
                    for (var prop in group) {
                        if (group.hasOwnProperty(prop) && group[prop].hasValue) {
                            oneHasValue = true;
                            break;
                        }
                    }
    
                    // Set the validity of all other fields based on whether the group has a value
                    for (var prop in group) {
                        if (group.hasOwnProperty(prop) && thisCtrl != group[prop]) {
                            group[prop].ctrl.$setValidity('requiredAny', oneHasValue);
                        }
                    }
    
                    // Return the validity of this field
                    return oneHasValue;
                };
            }
        };
    });
    

提交回复
热议问题