AngularJS 1.5.6重置表& NG的消息 [英] AngularJS 1.5.6 reset form & ng-messages
问题描述
我读了一些Stackoverflow帖子如何重置表单,但我没有得到它。
输入有效但显示错误消息。调试应用程序向我显示消息得到样式=不透明度:1; margin-top:0px;,但我不知道从哪里开始。
I read some Stackoverflow posts how to reset a form, but I doesn't get it. The input was valid but the error message was shown. Debugging the application shows me that the message gets a style="opacity: 1;margin-top: 0px;", but I have no idea from where.
<md-input-container flex style="margin-top: 0;margin-bottom: 5px">
<label translate>maintenanceMessage.description</label>
<input md-maxlength="40" required name="description" md-no-asterisk
ng-model="maintenanceMessageCtrl.newMaintenanceMessage.description" flex>
<div ng-messages="maintenanceMessageForm.description.$error" ng-if="maintenanceMessageForm.description.$touched">
<div ng-message="required" translate>maintenanceMessage.description.requiredMessage</div>
<div ng-message="md-maxlength" translate>maintenanceMessage.description.maxLengthMessage</div>
</div>
</md-input-container>
复位时执行以下功能
ctrl.resetFormAndHideDialog = function () {
ctrl.newMaintenanceMessage = {};
ctrl.newMaintenanceMessage.expirationDate = new Date();
ctrl.showLastModification = false;
$scope.maintenanceMessageForm.$setUntouched();
$scope.maintenanceMessageForm.$setPristine();
$mdDialog.hide();
};
我错过了什么吗?
谢谢帮助。
Conclusio :
似乎角料1.1.1有一个bug 。所以ng-message没有被隐藏。
Conclusio: It seems that angular material 1.1.1 has a bug. So ng-message wasn't hidden.
推荐答案
我已将相关的标记和代码放入CodePen中,看起来很好 - CodePen
I've put your relevant markup and code into a CodePen and it seems fine - CodePen
唯一奇怪的是表单重置时字符数不会设置为0。 可能是个错误。
The only odd thing is that the character count does not get set to 0 on form reset. Maybe a bug.
标记
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp">
<form name="maintenanceMessageForm">
<md-input-container flex style="margin-top: 0;margin-bottom: 5px">
<label>maintenanceMessage.description</label>
<input md-maxlength="40" required name="description" md-no-asterisk ng-model="newMaintenanceMessage.description" flex>
<div ng-messages="maintenanceMessageForm.description.$error" ng-if="maintenanceMessageForm.description.$touched">
<div ng-message="required">{{maintenanceMessage.description.requiredMessage}}</div>
<div ng-message="md-maxlength">{{maintenanceMessage.description.maxLengthMessage</div>
</div>
</md-input-container>
</form>
<md-button class="md-raised md-primary" ng-click="resetForm()">Reset</md-button>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDialog'])
.controller('AppCtrl', function($scope) {
$scope.maintenanceMessage = {
description: {
requiredMessage: "This is required",
maxLengthMessage: "Max length is 40"
}
};
$scope.resetForm = function () {
$scope.newMaintenanceMessage = {};
$scope.maintenanceMessageForm.$setUntouched();
$scope.maintenanceMessageForm.$setPristine();
};
});
这篇关于AngularJS 1.5.6重置表& NG的消息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!