如何要求 btn-radio Angular Bootstrap 按钮？

Question

我正在使用一组引导标签按钮作为单选按钮（正如它们在此处的角度引导文档中所说的那样 - http://angular-ui.github.io/bootstrap/）。他们工作得很好。我唯一的问题是，你如何对他们应用验证？您如何要求选择一个？复选框也是如此。对此有什么想法吗？我确信我不是唯一一个这样做的人。下面是 html/angular 的 sn-p。

<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 引导单选按钮验证“必需”。

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

在控制器中：

$scope.interacted = 函数（字段）{ 返回 $scope.submitted || （字段？字段。$dirty：假）； };

<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" />