Ошибка не отображается для Angular Material md-select

Я пытаюсь реализовать форму, в которой сообщения об ошибках не отображаются до тех пор, пока не будет нажата кнопка отправки. Для ввода это, кажется, работает из коробки, но для 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
person Spencer    schedule 21.03.2016    source источник

Ответы (6)


arrow_upward
4
arrow_downward

Возникла проблема с этой проблемой с github.

По сути, сообщение появляется только тогда, когда md-select размыто.

person stalin    schedule 21.03.2016
comment
пожалуйста, примите ответ, если это поможет вам, спасибо: D - person stalin; 21.03.2016
comment
Все еще исследую этот вопрос. Кажется, он описывает немного другое поведение. Я приму это, если это действительно ответит на вопрос и если никто другой не предложит решение. - person Spencer; 22.03.2016
comment
В проблеме проверьте уведомление (2) точно о той же проблеме, которую вы представляете. - person stalin; 22.03.2016
comment
В данный момент я немного занят другими делами и все еще изучаю эту проблему. Я займусь этим, но это может быть не сейчас, и я или кто-то другой может прийти, у кого есть реальное исправление. Я ценю, что вы указали, что это задокументированная проблема. Приставать ко мне, чтобы я принял твой ответ, не помогает. - person Spencer; 22.03.2016
comment
Извините, если это звучит так, будто я пристаю к вам, чтобы вы приняли мой ответ, на самом деле это не мое намерение, я просто хочу указать, что это именно та проблема, которая у вас есть, и найти исправление на основе этого. Не надо хамить мужику, но не парься продолжай работать :) - person stalin; 22.03.2016

arrow_upward
6
arrow_downward

Возможно, это могло бы помочь:

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

person memo    schedule 21.04.2016
comment
Сработало и для меня - я использовал это в сочетании с логическим значением, которое указывало, была ли форма отправлена. - person Tori Huang; 15.11.2016

arrow_upward
0
arrow_downward

Это известная ошибка, о которой упоминал @stalin. Вы можете обойти это с помощью чего-то вроде input type="hidden" , который взял на себя ответственность за проверку вместо вашего md-select или что-то подобное.

В некоторых случаях можно просто выбрать значение по умолчанию. Выбор/опция HTML5 имеет атрибут selected. Если это не сработает, вы также можете попробовать установить значение = "" для одного из ваших вариантов в качестве хака.

person Daniel Perník    schedule 26.05.2016

arrow_upward
0
arrow_downward

У меня была такая же проблема, и я исправил ее следующим образом

В моем теге формы

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

  };

Самое главное, я использую версию angular material 1.1.4.

Рабочий флункер

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

person Umanda    schedule 17.10.2017

arrow_upward
0
arrow_downward

Ниже код работает отлично..

<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>`
person Kapil Chhabra    schedule 19.09.2016

arrow_upward
0
arrow_downward

Я использую angular 4, и я попытался сделать это в своем компоненте:

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

всякий раз, когда я пытался отправить свою форму, и отображалось мое сообщение об ошибке.

Я не уверен, почему это работает, хотя =)

person jngacayan    schedule 23.10.2017