how to handle ng disabled in submit button and required directive on ui select in angular js

119 views Asked by At

I want to disable submit button when ui select element have null value or no option selected by ui select drop down list.

UI select code:

<form name="KeyConfigurationForm">
<div class="wrapper wrapper-content animated fadeInDown">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h3>
                Company App Configuration
            </h3>
        </div>

        <div class="ibox-content">
            <div class="row col-sm-offset-1">
                <div class="form-group col-sm-10">
                    <label class="col-sm-3 control-label">Select Company</label>
                    <div class="col-sm-9">
                        <ui-select ng-model="configvalues.CompanyInfoID" ng-change="getCompanyModulesListByCompanyID($select.selected.CompanyInfoID); GetFranchiseList($select.selected.CompanyInfoID)" theme="bootstrap" required>
                            <ui-select-match>{{$select.selected.Name}}</ui-select-match>
                            <ui-select-choices repeat="itm.CompanyInfoID as itm in Companies | selectFilter:{Name:$select.search, Code:$select.search}">
                                <div ng-bind-html="itm.Name | highlight: $select.search"></div>
                                <small ng-bind-html="itm.Code | highlight: $select.search"></small>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                </div>






            <button type="button" class="btn btn-primary" ng-click="saveConfigurationKeys()" ng-disabled="KeyConfigurationForm.$invalid"> Save Configuration</button>
            <a href="index.html#/index/main" type="button" class="btn btn-warning">Close</a>
        </div>

    </div>
</div>
</form>

But in my view Save(submit) button is enabled even if nothing is selected in drop down list. All code is placed in a form div named as KeyConfigurationForm.

(edited) After assigning my form a name all required fields impacting correctly on submit button but the problem with ui select was that on selecting nothing in it, returns null value which was not handeled correctly.

0

There are 0 answers