AngularJS 1.5.6 重置表单 &ng消息 [英] AngularJS 1.5.6 reset form & ng-messages

问题描述

我阅读了一些 Stackoverflow 帖子如何重置表单，但我不明白.输入有效，但显示错误消息.调试应用程序向我显示该消息的样式为 =opacity: 1;margin-top: 0px;"，但我不知道来自何处.

<label translate>maintenanceMessage.description</label><input md-maxlength="40" required name="description" md-no-asteriskng-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>

</md-input-container>

重置时我执行以下功能

 ctrl.resetFormAndHideDialog = function () {ctrl.newMaintenanceMessage = {};ctrl.newMaintenanceMessage.expirationDate = new Date();ctrl.showLastModification = false;$scope.maintenanceMessageForm.$setUntouched();$scope.maintenanceMessageForm.$setPristine();$mdDialog.hide();};

我错过了什么吗?

感谢您的帮助.

<小时>

结论:角度材料 1.1.1 似乎有一个错误.所以 ng-message 没有被隐藏.

解决方案

我已将您的相关标记和代码放入 CodePen 中，看起来不错 - CodePen

唯一奇怪的是字符数在表单重置时没有设置为 0.可能是个错误.

标记

<表单名称="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>
</md-input-container></表单><md-button class="md-raised md-primary" ng-click="resetForm()">重置</md-button>

JS

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache', 'ngDialog']).controller('AppCtrl', function($scope) {$scope.maintenanceMessage = {描述: {requiredMessage: "这是必需的",maxLengthMessage: "最大长度为 40"}};$scope.resetForm = 函数 () {$scope.newMaintenanceMessage = {};$scope.maintenanceMessageForm.$setUntouched();$scope.maintenanceMessageForm.$setPristine();};});

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>

on reset I execute following function

  ctrl.resetFormAndHideDialog = function () {
  ctrl.newMaintenanceMessage = {};
  ctrl.newMaintenanceMessage.expirationDate = new Date();
  ctrl.showLastModification = false;
  $scope.maintenanceMessageForm.$setUntouched();
  $scope.maintenanceMessageForm.$setPristine();
  $mdDialog.hide();
};

Am I missing something?

Thanks for helping.

---

Conclusio: It seems that angular material 1.1.1 has a bug. So ng-message wasn't hidden.

解决方案

I've put your relevant markup and code into a CodePen and it seems fine - CodePen

The only odd thing is that the character count does not get set to 0 on form reset. Maybe a bug.

Markup

<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 重置表单 &amp;ng消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！