AngularJS验证使用ng-messages没有窗体控件

Question

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

目前，我有这样的：

<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个元素：

1. 的input type="text"工作正常的显示机制。 hoursMinutes过滤器返回格式化的值，例如， 90分钟后将返回'1小时30分钟'。
2. 的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的能力合并为与模型值不同的能力（如果可能的话）。

有什么建议吗？

Answer 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> 

然后，它显示正确，它验证。