validate ui-select Angular JS - outside form

Question

I need to validate ui-select on button click event. When the value is selected in ui-select then only need to enable button. But the thing is, the button is outside of different div control and don't use form tag( already use another form inside div for another action). My sample code is following :

<div class="form-group form-group-sm">
    <label class="control-label text-xs col-xs-12 col-sm-5 col-md-4 ">Search :</label>

    <div class="col-xs-12 col-sm-7 col-md-8 ">
        <ui-select ng-model="cl.selected" theme="bootstrap" on-select="reload($item)" ng-disabled="disabled" title=""
                   required>
            <ui-select-match placeholder="Filter by Client">{{$select.selected.clName}}</ui-select-match>
            <ui-select-choices repeat="cl in cls | clFilter: {clName: $select.search, clNum: $select.search}">
                <div ng-bind-html="cl.clName | highlight: $select.search"></div>
                <small>
                    Cl Num : {{cl.clNum}}
                </small>
            </ui-select-choices>
        </ui-select>
    </div>
</div>

and button is like following :

<ul class="list-inline pull-right">
    <li>
        <button id="clientSaveContinue" class="btn btn-primary  btn-sm next-step"
                ng-click="submitForm()">
            Save and Continue
        </button>
    </li>
</ul>

So, how can enable button click any ui-select value contains or make ui-select as required

can you please provide a plunkr link

balajivaishnav
– balajivaishnav

2016-08-30 06:05:59 +00:00
Commented Aug 30, 2016 at 6:05 — balajivaishnav
– balajivaishnav, Commented Aug 30, 2016 at 6:05

Makarov Sergey · Accepted Answer · 2016-08-30 06:25:27Z

Not so much info =(

Suggest to use submitForm() inside a form tag, not on a button click event.

<form ng-submit="submitForm()"></form>

If you can't use a button inside your form, you may create <input type="submit"> or <button type="submit"> inside your form (if doesn't exist) and use some sort of linking directive.

'use strict';

import angular from 'angular';

function linked() {
    return (scope, element, attrs) => {
        var id = attrs['linked'];
        element.on('click', function () {
            document.getElementById(id).click();
            return false;
        });
    }
}

export default angular.module('components', [])
    .directive('linked', linked)
    .name;

And use it:

<form ng-submit="submitForm()">
    ...
    <input type="submit" style="display: none" id="mySubmitId">
</form> 

<button type="button" linked="mySubmitId">

And take a look on ng-submit directive.

Collectives™ on Stack Overflow

validate ui-select Angular JS - outside form

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related