md-select - 如何强制要求？答案

【问题标题】：md-select - how to force required?md-select - 如何强制要求？
【发布时间】：2015-09-04 12:00:51
【问题描述】：

如何强制md-select 在多种模式下表现得像

<select multiple required ... >

Here 是小提琴，以表明我的意思。在此示例中，我的浏览器不允许我在未从 select 标记中选择至少 1 个选项的情况下提交表单。

我希望 md-select 表现类似，但我不知道该怎么做 - 放置 'required' 属性或添加 'ng-require' 指令都没有帮助。

【问题讨论】：

【解决方案1】：

您可以依靠 Angular 而不是浏览器来对此进行验证。这是我的分叉示例：

具体来说：

<button type="submit" ng-disabled="myForm.$invalid">submit</button>

在表单有效之前保持提交按钮处于禁用状态，并且，

<form novalidate name="myForm">

为表单命名并告诉浏览器不要对其进行自己的验证。

您甚至可以为 ng-invalid 添加一些 CSS 类以在无效字段周围显示红色。

编辑：确保在 <select multiple> 上加上 ng-model，否则所需的属性将不起作用。

【讨论】：

是的，我知道我可以使用 novalidate 和 angular。但是有什么办法可以依赖浏览器吗？我想避免现在需要为错误消息编写自定义 css。
我玩了一会儿，但我似乎无法让它工作。 md-select 不是表单元素，因此我认为不会触发浏览器表单验证。
我再次检查了您的 sn-p 并且有一个奇怪的行为：如果您在 md-select 和选择框中选择一个选项，则按钮处于活动状态。但它不会停用我您完全取消选择 md-select 值。
这似乎不是预期的行为。实际上，我在尝试找到解决方案时遇到了您的 Github 帖子，所以请告诉我这是怎么回事。可能有一些巧妙的方法可以绕过它，比如在状态上放置一个 $watch，如果它是一个空数组，则将其重置为空字符串。
如前所述，从良好的 UI 角度来看，使用自定义消息突出显示错误字段比仅禁用提交按钮（很多人都这样做）很重要。从用户的角度考虑，重要的是告诉用户为什么禁用按钮，然后禁用它直到表单有效（程序员的角度）

【解决方案2】：

如果您不想禁用提交按钮，而是在点击提交按钮时触发错误，您可以将 $touched 属性设置为 true 以触发所需的警报

yourFormName.mdseletName.$touched=true;

【讨论】：