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单选按钮验证'required'。

将不同的ng-model提供给单选按钮
为实际的ngmodel保留一个隐藏字段
onchange of radio button update ng-model绑定到隐藏输入字段并将另一个单选按钮更新为空值
对隐藏字段保持必要的验证。隐藏字段但可以看到mg消息

：

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

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

1 个答案: