Angular Material 强制表单输入弹出警报答案

【问题标题】：Angular Material mandatory form inputs pop up alertAngular Material 强制表单输入弹出警报
【发布时间】：2017-11-08 20:21:03
【问题描述】：

我正在创建一个 Material 表单，并且在遵循此处找到的示例后，我有几个正确呈现的必填字段：https://material.angularjs.org/latest/demo/input

但是，在他们的示例中，当未填写所需的输入并且用户按下提交时，会显示一个弹出警报，我不确定这是如何完成的：

我的代码如下所示：

<div ng-switch-when="choice">
   <md-input-container class="md-block">
      <label style="font-size: 130%; white-space: normal;" for="{{element.section_element_name}}">{{element.section_element_label}}</label>  
      <md-select ng-if="element.mandatoryFlag==1" required id = {{element.section_element_name}} type="selectbasic" value={{element.q_value}} ng-model="element.answer">
         <md-option ng-repeat="option in element.section_element_choices" value="{{option.element_choice_value}}" >
            {{option.element_choice_label}}
         </md-option>
      </md-select>
      <div ng-messages="element.answer.$error" role="alert">
         <div ng-message="required" class="my-message">Please provide an answer.</div>
      </div>
      <md-select ng-if="element.mandatoryFlag==0" id = {{element.section_element_name}} type="selectbasic" value={{element.q_value}} ng-model="element.answer">
         <md-option ng-repeat="option in element.section_element_choices" value="{{option.element_choice_value}}" >
            {{option.element_choice_label}}
         </md-option>
      </md-select>
   </md-input-container>
</div>
<md-button ng-click="submit()" class="md-fab  md-mini">
   <md-tooltip md-direction="top">Save or Submit Form</md-tooltip>
   <i class="material-icons" style="vertical-align:middle;">send</i>
</md-button>

如果在提交时未填写内容，我必须做什么才能显示该弹出窗口？

【问题讨论】：

标签： angularjs input requiredfieldvalidator angularjs-material

【解决方案1】：

Chrome popup Please Fill Out this Field 中有很多与此相关的讨论。但是，这不是重复的，因为您问的是相反的问题。

对此的答案是，<input> 元素的 HTML5 required 属性行为不同于 <select> 元素的 required 行为。

This CodePen 演示了适用于<select> 元素的弹出窗口，但不适用于<md-select> 元素。

一个问题是材料选择没有第一个选项的空白条目。但是，即使添加它也不会出现弹出窗口。

第二个问题是required 没有应用于DOM 中隐藏的<select> 元素。所以浏览器无法添加弹窗。

<select class="md-visually-hidden" name="type" aria-hidden="true" tabindex="-1">
    <option value="app">Application</option>
    <option value="web">Website</option>
    <option ng-value="project.type" selected="" aria-checked="false"></option>
</select>

在所有这些之后，您可能只想处理 Material Design 风格的验证消息，并使用此答案中第一个链接中包含的步骤完全禁用弹出窗口。

【讨论】：