Angular Material mandatory form inputs pop up alert

Question

I'm creating a Material form and have a couple required fields that are rendering correctly after following the examples found on here: https://material.angularjs.org/latest/demo/input

However, in their example, when required inputs aren't filled out and a user presses Submit, a popup alert shows up and I'm not sure how this is done:

My code looks like this:

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

What do I have to do for that pop up to show up if things aren't filled out onSubmit?

score 1 · Answer 1 · answered Nov 16 '17 at 01:01

There is a lot of discussion related to this in Chrome popup Please Fill Out this Field. However this isn't a duplicate as you are asking a bit of the opposite question.

The answer to this is that the HTML5 required attribute behavior for <input> elements is different than the required behavior for <select> elements.

This CodePen demonstrates the popup working for a <select> element, but not working for the <md-select> element.

One issue is that the Material Select doesn't have a blank entry for the first option. However, even adding that doesn't make the popup appear.

The second issue is that the required is not applied to the hidden <select> element in the DOM. So the browser can't add the popup.

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

After all of this, you may just want to handle validation messages in the Material Design style and disable the popup completely using the steps included in the first link in this answer.

Angular Material mandatory form inputs pop up alert

1 Answers1