AngularJS 1.5.6重置表& NG的消息

时间:2016-09-07 11:33:08

标签: javascript angularjs angular-material

我读了一些Stackoverflow帖子如何重置表单,但我没有得到它。 输入有效但显示错误消息。调试应用程序向我显示消息得到样式=“不透明度:1; margin-top:0px;”,但我不知道从哪里开始。

<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没有被隐藏。

1 个答案:

答案 0 :(得分:1)

我已将相关的标记和代码放入CodePen中,看起来很好 - CodePen

唯一奇怪的是,在表单重置时字符数不会设置为0。 Maybe a bug

标记

window.scrollTop = offsetValue;

JS

<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>