角度材料 md-select 空值验证不起作用答案

【问题标题】：Angular material md-select empty value validation not working角度材料 md-select 空值验证不起作用
【发布时间】：2017-07-05 11:31:00
【问题描述】：

在 md-select 中，我添加了一个空的 md-option 项，这个选择字段是必填字段。但是当我选择值为空的“选择一个”项目时，验证不起作用。

代码笔：http://codepen.io/anon/pen/ygrJLG

<div ng-controller="AppCtrl" ng-cloak="" layout="column" layout-align="center center" layout-padding="" class="selectdemoValidations" ng-app="MyApp">
  <form name="myForm">

    <div layout="row" layout-align="start" flex="">
      <md-input-container flex>
        <label>Favorite Color</label>
        <md-select name="favoriteColor" ng-model="favoriteColor" required="" >
          <md-option value=''>Choose One</md-option>
          <md-option ng-value=color ng-repeat="color in colors">{{color}}</md-option>         
        </md-select>
        <div class="errors" ng-messages="myForm.favoriteColor.$error">
          <div ng-message="required">Required</div>
        </div>
      </md-input-container>
    </div>

    <div layout="row" layout-align="start">
      <md-checkbox ng-model="myForm.$invalid" disabled="">Form Invalid</md-checkbox>
      <md-checkbox ng-model="myForm.$dirty" disabled="">Form Dirty</md-checkbox>
      <md-checkbox ng-model="myForm.$submitted" disabled="">Form Submitted</md-checkbox>
      <md-checkbox ng-model="myForm.favoriteColor.$touched" disabled="">Select Touched</md-checkbox>
    </div>

    <div layout="row" layout-align="end" flex="">
      Selected Color is {{favoriteColor}}
      <md-button ng-click="clearValue()" ng-disabled="!favoriteColor">Clear</md-button>
      <md-button ng-click="save()" class="md-primary">Save</md-button>
    </div>
  </form>
</div>

【问题讨论】：

标签： javascript angularjs angular-material md-select

【解决方案1】：

你可以用它来修复它：

$scope.$watch('favoriteColor', function(val)
{
    if (!val) $scope.favoriteColor = null;
});

为什么？因为null和undefined是有区别的：

null = 设置为空值的值

undefined = 值尚未初始化

【讨论】：

【解决方案2】：

只需禁用“选择一个”选项：

 <md-option ng-value disabled>Choose One</md-option>

【讨论】：

我应该允许用户选择“选择一个”，然后显示错误验证消息。