AngularJS 1.5.6 reset form & ng-messages

Question

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'm having a very similar issue using angular-material 1.1.1 and angularJS 1.5.8. Could you tell me which was the solution you finally used? — lealceldeiro, Jul 06 '17 at 14:47
the problem is ng-animate as you can read here https://github.com/angular/material/issues/9543 downgrade to different version or some other fixes are included — Thomas Zoé, Jul 06 '17 at 15:18
Thanks! Downgrading didn't work for me, but one of the workarounds did :) — lealceldeiro, Jul 06 '17 at 17:33

camden_kid · Accepted Answer · 2016-09-07T12:37:40.847

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();
  };
});

Thank you, I changed the verions in your sample to angular 1.5.8 and angular-material 1.1.1. Now the error occurs. — Thomas Zoé, Sep 07 '16 at 13:03

AngularJS 1.5.6 reset form & ng-messages

1 Answers1

Linked