Angular Material md-select没有显示错误

时间:2016-03-21 18:01:39

标签: javascript angularjs angular-material

我正在尝试实现一个表单,在单击提交按钮之前,错误消息不会显示。对于输入,这似乎是开箱即用的,但对于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

开始修复的

6 个答案:

答案 0 :(得分:6)

也许这可能会有所帮助:

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

答案 1 :(得分:4)

github issue

存在问题

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

答案 2 :(得分:0)

这是@stalin提到的已知错误。您可以通过input type="hidden"之类的方式解决问题,md-select负责验证而不是<?php $consecutive_keys = array( 0 => 'Zero', 1 => 'One', 2 => 'Two', ); $sparse_keys = array( 5 => 'Five', 10 => 'Then', ); $dictionary = array( 'Foo' => 'Bar', ); echo json_encode($consecutive_keys) . PHP_EOL; echo json_encode($sparse_keys) . PHP_EOL; echo json_encode($dictionary) . PHP_EOL; 或类似的东西。

在某些情况下,可以选择默认值。 HTML5 select / option具有selected属性。如果它不起作用,你也可以尝试在你的一个选项上设置value =“”作为黑客。

答案 3 :(得分:0)

下面的代码工作正常......

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

答案 4 :(得分:0)

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

在我的表格标签

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

在我的md-select框中

<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");

  };

最重要的是,我使用的是棱角材料1.1.4 版本

工作Flunker

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

答案 5 :(得分:0)

我正在使用角度4,我尝试在我的组件中执行此操作:

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

每当我尝试提交表单时,都会显示错误消息。

我不知道为什么它有效但是=)