如何形成角度验证联合下拉菜单？

Question

HTML：

<form name="loginForm" ng-submit="submit()" novalidate>
    <select name="Month" ng-required="true" ng-model="dob.Month">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>

    <select name="Year" ng-required="true" ng-model="dob.Year">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</form>

我希望错误消息为（需要选择月，年！）

有类似的东西：

<span ng-if="loginForm.Year.$error.required">This is required!</span>
<span ng-if="loginForm.Month.$error.required">This is required!</span>

但我希望将错误消息显示为（需要选择月，年！）

有没有办法为这些选择菜单创建forloop并查看它们是否为$ invalid-必需？

Answer 1

您可以对表单本身进行验证

<span ng-if="loginForm.$invalid">Month, Year needs to be selected!</span>

Demo Plunkr

Answer 2

如果您希望在月份或年份无效的情况下显示相同的错误消息，则可以将上面的两个错误消息合并为一条消息，如下所示：

<span ng-if="loginForm.Year.$error.required || loginForm.Month.$error.required">
     Month and Year need to be selected!
</span>

如果两者均未选中，或者一个都没有选中，则将显示错误消息。

---

编辑：

为了实现所需的行为，您应该具有三个具有不同ng-if条件的单独错误消息，如下所示：

<p>
  <span ng-if="selectsForm.month.$error.required && selectsForm.year.$error.required">Month and year must be selected!</span>
  <span ng-if="selectsForm.$dirty && (selectsForm.month.$error.required || !selectsForm.year.$error)">Month needs to be selected!</span>
  <span ng-if="selectsForm.$dirty && (selectsForm.year.$error.required || !selectsForm.month.$error)">Year needs to be selected!</span>
</p>