How To Require btn-radio Angular Bootstrap Button?

Question

I'm using a set of bootstrap label buttons as radio buttons (as they state to do in the angular bootstrap documentation here - http://angular-ui.github.io/bootstrap/). They work great. Only question I have is, how to you apply validation to them? How to you require one to be selected? Same goes with checkboxes. Any thoughts on this? I'm sure I'm not the only one to do this. Below is a snippet of the html/angular.

<div class="btn-group">
   <label class="btn btn-primary" ng-model="model.accident.vehicle.occupant.isOwner" btn-radio="'YES'">Yes</label>
   <label class="btn btn-primary" ng-model="model.accident.vehicle.occupant.isOwner" btn-radio="'NO'">No</label>
</div>

This answered my question. Works perfectly! stackoverflow.com/questions/24685664/… — DGSouth
– DGSouth, Commented Aug 18, 2014 at 19:38

Pravin Pujari · Accepted Answer · 2015-06-30 12:35:45Z

I had similar issue. I prepared following work around for me to validate 'required' with uncheckable ui bootstrap radio buttons.

give different ng-model to radio buttons
keep one hidden field for actual ngmodel
onchange of radio button update ng-model bind to hidden input field and update the other radio button to null value
keep required validation on hidden field. Field is hidden but mg-message is visible

in controller:

$scope.interacted = function (field) { return $scope.submitted || (field ? field.$dirty : false); };

<form name="my_form"
  class="main-form container"
  ng-controller="FormCtrl"
  ng-cloak class="ng-cloak"
  ng-submit="submit()"
  novalidate>

<div class="control-group">
    <div class="col-md-6">
        <div class="btn-group">
            <label class="btn btn-default"
                   name="radioModel"
                   ng-model="data.radioModel1"
                   btn-radio="'No'"
                   uncheckable
                   ng-required="!data.radioModel"
                   ng-change="data.q1 = (data.radioModel1 || null);data.radioModel2=null">No</label>

            <label class="btn btn-default"
                   name="radioModel"
                   ng-model="data.radioModel2"
                   btn-radio="'Yes'"
                   uncheckable
                   ng-required="!data.radioModel"
                   ng-change="data.q1 = (data.radioModel2 || null);data.radioModel1=null">Yes</label>
        </div>
        <input class="form-control"
               type="text"
               name="q1"
               id="input_q1"
               ng-model="data.q1"
               ng-model-options="{ updateOn: 'blur' }"
               ng-keyup="cancel($event)"
               required
               placeholder="First"
               style="display:none" />
        <div class="error-messages" ng-if="interacted(my_form.q1)" ng-messages="my_form.q1.$error">
            <div ng-message="required">Please select answer</div>
            <div ng-messages-include="form-messages"></div>
        </div>
    </div>
    <div class="col-md-6">
        {{data.q1 | json}}
        {{my_form.radioModel.$error | json}}
    </div>
</div>
<input class="form-control" type="submit" />

Collectives™ on Stack Overflow

How To Require btn-radio Angular Bootstrap Button?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related