admin管理员组

文章数量:1291044

I'm trying to implement a form where the error messages don't show up until the submit button is clicked. For an input, this seems to work out of the box, but for md-select isn't behaving as expected.

When I submit the form (without filling anything out) I get the error message for the input, but not for the md-select.

Here's the form:

<form name="userForm" novalidate ng-submit="test()">
  <md-input-container>
    <label>Last Name</label>
    <input name="lastName" ng-model="lastName" required>
    <div ng-messages="userForm.lastName.$error">
      <div ng-message='required'>This is required!</div>
    </div>
  </md-input-container>

  <md-input-container class="md-block">
    <label>Favorite Number</label>
    <md-select name="favoriteNumber" ng-model="myNumber" required>
      <md-option value="1">One</md-option>
      <md-option value="2">Two</md-option>
    </md-select>
    <div ng-messages="userForm.favoriteNumber.$error">
      <div ng-message='required'>This is required</div>
    </div>
  </md-input-container>

  <div>name = {{lastName}}</div>
  <div>userForm.lastName.$error = {{userForm.lastName.$error}}</div>
  <div>number = {{myNumber}}</div>
  <div>userForm.favoriteNumber.$error = {{userForm.favoriteNumber.$error}}  </div>

  <md-button type="submit" class="md-raised md-primary">Save</md-button>
</form>

Note that this is fixed as of Angular Material 1.1.1

I'm trying to implement a form where the error messages don't show up until the submit button is clicked. For an input, this seems to work out of the box, but for md-select isn't behaving as expected.

When I submit the form (without filling anything out) I get the error message for the input, but not for the md-select.

http://plnkr.co/edit/BDB0NVccWckqgnSYD9Qt?p=preview

Here's the form:

<form name="userForm" novalidate ng-submit="test()">
  <md-input-container>
    <label>Last Name</label>
    <input name="lastName" ng-model="lastName" required>
    <div ng-messages="userForm.lastName.$error">
      <div ng-message='required'>This is required!</div>
    </div>
  </md-input-container>

  <md-input-container class="md-block">
    <label>Favorite Number</label>
    <md-select name="favoriteNumber" ng-model="myNumber" required>
      <md-option value="1">One</md-option>
      <md-option value="2">Two</md-option>
    </md-select>
    <div ng-messages="userForm.favoriteNumber.$error">
      <div ng-message='required'>This is required</div>
    </div>
  </md-input-container>

  <div>name = {{lastName}}</div>
  <div>userForm.lastName.$error = {{userForm.lastName.$error}}</div>
  <div>number = {{myNumber}}</div>
  <div>userForm.favoriteNumber.$error = {{userForm.favoriteNumber.$error}}  </div>

  <md-button type="submit" class="md-raised md-primary">Save</md-button>
</form>

Note that this is fixed as of Angular Material 1.1.1

• javascript
• angularjs
• angular-material

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Mar 21, 2016 at 18:01 SpencerSpencer 2,24533 gold badges2828 silver badges5050 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 6

Maybe this could help:

<div ng-messages="userForm.favoriteNumber.$error" ng-show="userForm.favoriteNumber.$invalid">

There is an issue about this github issue

Basically, the message just shows up when the md-select is blurred

This is known bug as @stalin mentioned. You can workaround it by something like a input type="hidden" , which took responsibility of validation instead of your md-select, or something similar.

In some cases is just possible to select default value. HTML5 select/option has a selected attribute. If it won't work, you can also try to set value="" on one of your options as a hack.

I had the same issue I and fixed it as follows

In my Form tag

<form name="userForm" method="post" action="javascript:;">

In my md-select box

<md-select name="favoriteNumber" ng-model="myNumber" required>

In my submit button

<md-button class="md-raised md-primary" ng-click="saveMe()">Save</md-button>

In my controller

$scope.saveMe = function() {


    if(!$scope.userForm.$valid) {
          $scope.userForm.$setSubmitted();
          return;
        }


      alert("I am validated");

  };

Most importantly I am using angular material 1.1.4 version

Working Flunker

http://embed.plnkr.co/1icZXYMheoAui7HYZukB/1

Below code is working perfect..

<md-input-container flex-gt-xs class="form-group">
  <label translate>Types</label>
  <md-select name="type" ng-required="true" ng-model="vm.model.type">
    <md-option>Number One</md-option>
    <md-option>Number Two</md-option>
  </md-select>
  <div ng-messages="editOrganisationForm.type.$error" 
      ng-show="editOrganisationForm.$submitted || editOrganisationForm.type.$touched ||  editOrganisationForm.type.$dirty ">
    <div ng-message-exp="['required']" ng-hide="editOrganisationForm.type.$valid">
        <span translate>Please select Type</span>
    </div>
  </div>
</md-input-container>`

I am using angular 4 and I tried doing this in my ponent:

this.formGroup.controls.selectField.updateValueAndValidity();

whenever I tried to submit my form and it displayed my error message.

I am not sure why it works though =)

本文标签： javascriptError not showing for Angular Material mdselectStack Overflow