Javascript 未显示角材质md select的错误
我正在尝试实现一个表单,在该表单中,只有单击submit按钮后才会显示错误消息。对于输入,这似乎是开箱即用的,但对于md,select的行为并不像预期的那样 当我提交表单时(没有填写任何内容),我会收到输入的错误消息,但不会收到md select的错误消息 以下是表格:Javascript 未显示角材质md select的错误,javascript,angularjs,angular-material,Javascript,Angularjs,Angular Material,我正在尝试实现一个表单,在该表单中,只有单击submit按钮后才会显示错误消息。对于输入,这似乎是开箱即用的,但对于md,select的行为并不像预期的那样 当我提交表单时(没有填写任何内容),我会收到输入的错误消息,但不会收到md select的错误消息 以下是表格: <form name="userForm" novalidate ng-submit="test()"> <md-input-container> &
<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>
姓
这是必需的!
最喜欢的号码
一个
两个
这是必需的
name={{lastName}}
userForm.lastName.$error={{{userForm.lastName.$error}
number={{myNumber}}
userForm.favoriteNumber.$error={{{userForm.favoriteNumber.$error}}
拯救
注意,这是固定的,因为角材料1.1.1有一个问题 基本上,当
md select
模糊时,消息就会显示出来,这可能会有所帮助:
这就是所谓的@stalin bug。您可以通过类似于input type=“hidden”
的方法来解决这个问题,它负责验证,而不是您的md select
,或者类似的方法
在某些情况下,可以选择默认值。HTML5选择/选项具有选定属性。如果它不起作用,你也可以试着在你的一个选项上设置value=“”,作为黑客。下面的代码工作得很好
<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>`
类型
头号人物
二号
请选择类型
`
我遇到了相同的问题,并按如下方式修复了它
在我的表单标签中
<form name="userForm" method="post" action="javascript:;">
最重要的是,我使用的是棱角材质1.1.4版本
工作不及格者
我正在使用angular 4,并尝试在我的组件中执行此操作:
this.formGroup.controls.selectField.updateValueAndValidity();
每当我尝试提交表单时,它都会显示我的错误消息
我不知道它为什么有效,但是=)如果这对你有帮助,请接受答案,谢谢:我会研究这个问题。似乎描述了一种稍微不同的行为。如果它真的回答了问题,并且没有其他人提出解决方案,我会接受。在问题检查中,通知(2)与您当前的问题完全相同。我现在有点忙,正在处理一些其他事情,并且仍在调查此问题。我会着手解决这个问题,但现在可能不行,我或其他人可能会来解决这个问题。我感谢你指出这是一个有文件记录的问题。纠缠我接受你的答案是没有帮助的。对不起,如果我听起来像是纠缠你接受我的答案,真的不是我的意图,我只是想指出,这正是你所面临的问题,并在此基础上找到一个固定的答案。不必是粗鲁的人,但不用担心继续工作:)也为我工作过-我将此与布尔值结合使用,表示表单是否已提交。
<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");
};
this.formGroup.controls.selectField.updateValueAndValidity();