AngularJS form validation on a bootstrap dropdown

Question

Is it possible to add AngularJS to a Boostrap dropdown (not a <select/>, but rather the Javascript component)? This is what I have:

<div class="form-group has-feedback" ng-class="{'has-error': editorForm.example.$invalid && !editorForm.example.$pristine, 'has-success': editorForm.example.$valid && !editorForm.example.$pristine}">
        <label for="example">Example</label>

        <div class="dropdown" id="example" style="width: 90%">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdown"
                    data-toggle="dropdown">
                {{exampleLabel}}
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li data-ng-repeat="example in examples" role="presentation"><a
                        role="menuitem" tabindex="-1"
                        data-ng-click="selectExample(example)"
                        href="javascript:void(0);">{{example.label}}</a>
                </li>
            </ul>
        </div>

$scope.selectExample = function(val) {
    $scope.example = val;
}

Is there a way for me to programatically set the validity in selectExample?

Why not use angular bootstrap ui? angular-ui.github.io/bootstrap github.com/angular-ui/bootstrap/tree/master/src/dropdown — bencripps
– bencripps, Commented Sep 19, 2014 at 18:58

Rana · Accepted Answer · 2015-03-11 14:05:29Z

2

Add this hidden text box:

<input type="text" name="exampleLabel" ng-model="exampleLabel" hidden required />

and add this validation after the dropdown

 <span class="text-danger" ng-show="myForm.exampleLabel.$error.required">
                    validation message
                </span>

answered Mar 11, 2015 at 14:05

Rana

1,2183 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Panteleimon.Kylish · Accepted Answer · 2018-05-21 11:20:55Z

Add input type="hidden":

<form class="form-validation" name="actin_form">
    <div uib-dropdown>
        <input type="hidden" name="nameVal" ng-model="nameValModel" required/>
        <button type="button" ng-class="{'input-error': actin_form.nameVal.$invalid}" class="btn" uib-dropdown-toggle>
            <span>{{nameValModel}}</span>
        </button>
        <ul class="dropdown-menu">
            <li ng-repeat="type in list" class="text-wrap">
                <span>{{type.name}}</span>
            </li>
        </ul>
    </div>
</form>

Nalin · Accepted Answer · 2017-02-16 13:45:05Z

0

This work for me.hope you can get some idea.

<style>

.dropdown-has-error{
    border-color: #a94442;//bootsrtap warning color
}

</style>

add ng-class directive to the dropdown button

ng-class="{'dropdown-has-error' : example == ''}

in the controller

$scope.example = '';

$scope.selectExample = function(val) {
    $scope.example = val;
}

or you can check condition as in the above post,

ng-class="{'dropdown-has-error' : myForm.exampleLabel.$error.required}

edited Feb 16, 2017 at 13:45

answered Feb 16, 2017 at 13:30

Nalin

1112 silver badges7 bronze badges

Collectives™ on Stack Overflow

AngularJS form validation on a bootstrap dropdown

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related