【问题标题】：Error not showing for Angular Material md-selectAngular Material md-select 未显示错误
【发布时间】：2016-03-21 18:01:39
【问题描述】：

我正在尝试实现一个在单击提交按钮之前不会显示错误消息的表单。对于输入，这似乎是开箱即用的，但对于 md-select 的行为不符合预期。

当我提交表单（没有填写任何内容）时，我收到输入错误消息，但 md-select 没有。

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

这是表格：

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

请注意，这在 Angular Material 1.1.1 中已修复

【问题讨论】：

标签： javascript angularjs angular-material

【解决方案1】：

也许这会有所帮助：

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

【讨论】：

也为我工作 - 我将它与指示表单是否已提交的布尔值结合使用。

【解决方案2】：

关于这个github issue有一个问题

基本上，当md-select 模糊时，该消息才会显示

【讨论】：

如果对您有帮助，请接受答案，谢谢：D
仍在研究这个问题。似乎描述了一种略有不同的行为。如果它真的回答了问题并且没有其他人提出解决方案，我会接受它。
在问题检查中，notice(2) 与您提出的问题完全相同
我现在有点忙于其他一些事情，并且仍在调查这个问题。我会解决这个问题，但现在可能不是，我或其他人可能会出现，他们有一个实际的解决方案。感谢您指出这是一个记录在案的问题。纠缠我接受你的回答是没有用的。
对不起，如果我听起来像是在纠缠你接受我的回答，这真的不是我的本意，我只想指出这是你所遇到的确切问题，并在此基础上找到解决方法。没必要做粗鲁的人，但不要担心继续工作:)

【解决方案3】：

这是@stalin 提到的已知错误。您可以通过 input type="hidden" 之类的方法来解决它，它负责验证而不是您的 md-select 或类似的东西。

在某些情况下只能选择默认值。 HTML5 选择/选项有一个 selected 属性。如果它不起作用，您还可以尝试将 value="" 在您的一个选项上设置为 hack。

【讨论】：

【解决方案4】：

我遇到了同样的问题并修复如下

在我的表单标签中

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

在我的 md 选择框中

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

在我的提交按钮中

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

在我的控制器中

$scope.saveMe = function() {


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


      alert("I am validated");

  };

最重要的是我使用的是angular material 1.1.4版本

勤劳的人

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

【讨论】：

【解决方案5】：

下面的代码运行完美..

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

【讨论】：

【解决方案6】：

我正在使用 Angular 4，我尝试在我的组件中这样做：

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

每当我尝试提交表单并显示我的错误消息时。

我不知道为什么它会起作用 =)

【讨论】：