[英]Error not showing for Angular Material md-select
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.
对于输入,这似乎是开箱即用的,但对于md-select不符合预期。
When I submit the form (without filling anything out) I get the error message for the input, but not for the md-select. 当我提交表单(没有填写任何内容)时,我收到输入的错误消息,但不是md-select的错误消息。
http://plnkr.co/edit/BDB0NVccWckqgnSYD9Qt?p=preview 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>
也许这可以帮助:
<div ng-messages="userForm.favoriteNumber.$error" ng-show="userForm.favoriteNumber.$invalid">
There is an issue about this github issue 关于这个github问题有一个问题
Basically, the message just shows up when the md-select
is blurred 基本上,当
md-select
模糊时,消息就会显示出来
This is known bug as @stalin mentioned. 这是@stalin提到的已知错误。 You can workaround it by something like a
input type="hidden"
, which took responsibility of validation instead of your md-select
, or something similar. 您可以通过
input type="hidden"
类的方式来解决它,它负责验证而不是您的md-select
或类似的东西。
In some cases is just possible to select default value. 在某些情况下,可以选择默认值。 HTML5 select/option has a selected attribute.
HTML5 select / option具有selected属性。 If it won't work, you can also try to set value="" on one of your options as a hack.
如果它不起作用,您还可以尝试在其中一个选项上设置value =“”作为黑客。
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 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框中
<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 最重要的是我使用角度材料1.1.4版本
Working Flunker 工作Flunker
http://embed.plnkr.co/1icZXYMheoAui7HYZukB/ 1 http://embed.plnkr.co/1icZXYMheoAui7HYZukB/ 1
I am using angular 4 and I tried doing this in my component: 我正在使用角度4,我尝试在我的组件中执行此操作:
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 =) 我不知道为什么它有效但是=)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.