AngularJS 验证使用没有表单控件的 ng-messages答案

【问题标题】：AngularJS validation using ng-messages without a form controlAngularJS 验证使用没有表单控件的 ng-messages
【发布时间】：2016-03-08 08:37:54
【问题描述】：

我将时间作为整数分钟存储在数据库/模型中。但是，我想以十进制小时数显示给用户（并让他们使用多个按钮编辑值）。

目前我有这个：

<p class="input-group">
    <input type="text" readonly="readonly" value="{{vm.time.minutes|hoursMinutes}}" class="form-control" />
    <span class="input-group-btn">
        <ix-time-picker minutes="vm.time.minutes"></ix-time-picker>
    </span>
</p>

p 标签中的 2 个元素：

input type="text" 作为显示机制工作得很好。 hoursMinutes 过滤器返回一个格式化的值，例如90 分钟，它将返回“1 小时 30 分钟”。
ix-time-picker 指令会弹出一个模态窗口，其中包含15 mins、30 mins、45 mins、1 hour、1:15 hours 等按钮。

这工作正常 - 除了验证。我正在使用ng-messages，但我不知道如何显示required 状态的验证：

<li class="help-block has-error"
    ng-if="mainForm.$submitted"
    ng-messages="mainForm.minutes.$error">
    <span ng-message="required">
        Minutes is required.
    </span>
</li>

我在名为minutes 的表单上没有控件（至少带有ng-model），因此它不会显示消息。我可以添加一个隐藏的input 和ng-model="vm.times.minutes"，但由于我需要在应用程序中反复使用它，我不想这样做。或者至少我想构建某种通用指令，将在控件上具有ng-model 的能力与显示与模型值不同的value 的能力相结合，如果可能的话。

有什么建议吗？

【问题讨论】：

标签： angularjs angularjs-validation ng-messages

【解决方案1】：

啊哈 - 一种选择是将 input 设为 label：

<p class="input-group">
    <label id="minutes" name="minutes" readonly="readonly" class="form-control">{{vm.time.minutes|hoursMinutes}}</label>
    <span class="input-group-btn">
        <ix-time-picker minutes="vm.time.minutes"></ix-time-picker>
    </span>
</p>

然后它正确显示并验证。

【讨论】：