Require one button in a btn-group

Question

For form validation, either 'Foo' or 'Bar' should be selected below. The form should be invalid, and submit button disabled, if neither one is selected.

Is there an AngularJS directive that's up to the task? We've tried some permutations of "ng-require" and/or "required", along with some other experimentation, but no luck. Is it not possible with buttons?

<div class="form-group">
    <div class="btn-group">
        <button type="button" class="btn btn-default" data-ng-click="vm.setCaseType('Foo')" data-ng-class="{ 'active': vm.caseType == 'Foo' }">Foo</button>
        <button type="button" class="btn btn-default" data-ng-click="vm.setCaseType('Bar')" data-ng-class="{ 'active': vm.caseType == 'Bar'}">Bar</button>
    </div>
</div>

AngularJS 1.2.16; Bootstrap 3.1.1

Answer 1

on click of any of the buttons call a method which sets a flag to false say 'btnSelected'. Now you could use this flag with ng-disabled inside the submit button.

in the way described below

               <div class="btn-group">
                    <button type="button" class="btn btn-default" data-ng-click="Chk()">Foo</button>
                    <button type="button" class="btn btn-default" data-ng-click="Chk()">Bar</button>
                </div>

Now in your controller.Set the button to true by default to keep the button disabled,enable it via flag through the function like:

   $scope.btnSelected = true;
 $scope.Chk = function(){
        $scope.btnSelected = false;
    }

On your save button:

<button type="submit" ng-disabled="testForm.$invalid || btnSelected" class="btn btn-      primary">
 <span class="glyphicon glyphicon-save"></span> Save   </button>