如何要求btn-radio角度自举按钮？

Question

我正在使用一组引导标签按钮作为单选按钮(正如他们在角度引导文档中所说的那样 - http://angular-ui.github.io/bootstrap/).他们工作得很好.我唯一的问题是,如何对他们进行验证？如何选择一个？复选框也是如此.有什么想法吗？我确信我不是唯一一个这样做的人.下面是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>

Answer 1

我有类似的问题。我准备了以下工作，以使用不可检查的 ui bootstrap 单选按钮来验证“必需”。

1. 为单选按钮提供不同的 ng-model
2. 为实际的 ngmodel 保留一个隐藏字段
3. 单选按钮的 onchange 更新 ng-model 绑定到隐藏输入字段并将另一个单选按钮更新为空值
4. 在隐藏字段上保留所需的验证。字段被隐藏，但 mg 消息可见

在控制器中：

$scope.interacted = 函数（字段）{ return $scope.subscribed || (字段？字段。$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" />