CODEWITHSUNDEEP
angularjsvalidationui-select
KaviSuja
KaviSuja

Reputation: 450

validate ui-select Angular JS - outside form

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

Upvotes: 0

Views: 169

Answers (1)

Makarov Sergey
Makarov Sergey

Reputation: 932

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.

Upvotes: 1

Related Questions