how to implement "required" validation attribute ?

[smoothello]

Hi, I was wondering if someone had already found a solution for how to implement the "required" validation attribute ? Thank you very much in advance for your feedback Regards kbjp

[gnbezerra]

I am also interested in this. Anyone found out how to do it?

Thank you.

[gustavolira]

+1

[RafaMedina-zz]

+1

[im1dermike]

+1. Can't believe this isn't implemented.

[iaian]

+1

[jjayaraman]

+1
I am too need to make the multi-select component as required mandatory field. Any idea how to do that ?

Thanks nice and very useful component.

[sjohnson32]

+1

[desgrafx]

+1

[krzyhan]

Try this, it works for me:

app.directive('ngDropdownRequired', function () {
	   return {
		   restrict: 'A',
		require: '?ngModel',
		link: function ($scope, elem, attrs, ngModel) {
			
			$scope.updateForm = function (model, mode) {
				model.$setValidity("requiredSelect", mode);
			}
			
			$scope.checkModel = function (model) {
				return !((angular.isObject(model) && angular.equals(model, {})) || (angular.isArray(model) && model.length == 0));
			}
			
			$scope.$watch(attrs.selectedModel, function (val) {
				$scope.updateForm(ngModel, $scope.checkModel(val));
			}, true);
		}
	};
});

And then in HTML ng-dropdown-required and ng-model with your model

<div name="country" 
	ng-dropdown-multiselect="" 
	options="countries" 
	selected-model="model.country" 
	ng-dropdown-required 
	ng-model="model.country">
</div>

[santiquetzal]

+1

[sergioamorim]

+1

[deepakkoirala]

How I implemented required for my submit button is. I checked the length of the array of the model of the multi select box. I disabled the button if the multiselect selected length is less than 1.

<input type="button" ng-click="submitRemoveProviderFromTin(ind)" class="primary-button" value="Submit" ng-disabled="(formObject.providersSelectedPcp.length < 1) || nameFormRemoveProviderFromTin.$invalid">

This should help at some point.

[kodeepak89]

@deepakkoirala it worked, thanks.

[galmok]

@krzyhan I tried your directive and it works. Now, however, I need to expand on it to make it conditional. I want it to be able to parse a query and use the boolean result from it to determine if the dropdown can be ignored or not.

I changed the $watch to this:

$scope.$watch(attrs.selectedModel,
                            function (val) {
                                var booleanResult = $parse(attrs.ngDropdownRequired)($scope);
                                if (booleanResult)
                                    $scope.updateForm(ngModel, $scope.checkModel(val));
                                else 
                                    $scope.updateForm(ngModel, true);
                            },
                            true);

It almost works. When I specify the attribute ng-dropdown-required="vm.someObject.someBoolean", it does parse and evaluate the string and returns the boolean. BUT... I initially set this boolean and it is acted upon. But later changes of this boolean (without attrs.selectedModel being changed) does not reflect the updated state.

How do I make the directive update when the code in the ng-dropdown-required results in a new state? I can't exactly watch it as it could include filters and more.

[kenarwong]

@galmok This is how I implemented a conditional. You have to add a watch for "ngDropdownRequired" as well.

angular.module('ait').directive('ngDropdownRequired', function ($parse) {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function ($scope, elem, attrs, ngModel) {
            var condition;

            $scope.updateForm = function (model, mode) {
                model.$setValidity("ng-dropdown-required", mode);
            }

            $scope.checkModel = function (model) {
                return !((angular.isObject(model) && angular.equals(model, {})) || (angular.isArray(model) && model.length === 0));
            }

            $scope.$watch(attrs.ngDropdownRequired, function (val) {
                if (val === undefined) {
                    val = true; // Default true
                }
               $scope.updateForm(ngModel, val ? $scope.checkModel($parse(attrs.selectedModel)($scope)) : true);
            }, true);

            $scope.$watch(attrs.selectedModel, function (val) {
                var condition = $parse(attrs.ngDropdownRequired)($scope);
                if (condition === undefined) {
                    condition = true; // Default true
                }
                $scope.updateForm(ngModel, condition ? $scope.checkModel(val) : true);
            }, true);
        }
    };
});

[21rids]

how i can show error message

[krzyhan]

<p class="error" ng-show="form.country.$invalid">message here</p> where "form" is form name and "country" is dropdown name

[rafbel]

has this been implemented?

[mozaffar]

It's so easy: add a "hidden" input box beside it and set its ng-model to first element of "selected-model" of dropdown and set its ng-required to true. Here is the code:

<div ng-dropdown-multiselect options="ctrl.list" selected-model="ctrl.item"></div>
<input type="hidden" ng-model="ctrl.item[0]" ng-required="true">

That's it. enjoy ;)