Resetting forms in AngularJS 1.5.6 with ng-messages functionality

I have been searching for solutions on Stackoverflow regarding how to reset a form, but I am still not able to figure it out. Even though the input was valid, the error message kept showing up. Upon debugging the application, I noticed that the message was receiving inline styles like "opacity: 1; margin-top: 0px;", but I couldn't determine where this styling was coming from.

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

When resetting, the following function is executed:

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

Do you think there's something I might be missing?

Thank you in advance for any assistance.

Conclusion: It appears that there may be a bug in angular material 1.1.1 causing the ng-message not to be hidden properly.

javascriptangularjsangular-material

Answer №1

The code has been compiled and tested on CodePen with success - CodePen

One issue noticed is that the character count does not reset to 0 after form reset. Could be a potential bug here.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the data in getServerSideProps to be altered?

After fetching data from an API and passing it to index.js using getServerSideProps, I noticed that the prop array is initially in order by rank [1, 2, 3, etc]. Here's an example of the data: [ {rank: 1, price: 123}, {rank: 2, price: 1958}, {rank: ...

javascriptnext.js

Transmit information to an AngularJS application instantly

Looking for a solution to keep my AngularJS app displaying real-time data without constantly querying my api. Is there a way to establish a connection between my server and the AngularJS app so that new data can be pushed from the server to the app for dis ...

angularjsnode.jsreal-time

Passport session is lost following oauth callback

Developing a hybrid app using Ionic, Angular, nodejs, etc. After the user logs in with their email and password, they want to include 3rd party authentication for their account. Once the user is serialized into session, we verify their authorization sta ...

angularjsnode.jsexpressionic-frameworkpassport.js

Unlocking the full potential of AngularJS comparator

I created this jsfiddle to experiment with the AngularJS comparator functionality, but I am encountering an issue: Check out my jsFiddle Comparator here It appears that my custom comparator function 'wiggleSort' is not being called as expected: ...

angularjscomparator

An error is thrown when using less.js

Every time I attempt to add less.js, I encounter an XmlHttpRequest Exception 101. Including the .less file is done using this method: <link rel="stylesheet/less" type="text/css" href="anything.less" /> This issue only arises when I upload the th ...

javascriptjquerycsslesstumblr

Trouble with getting started on the Google Sheets API (v4) tutorial

I'm currently working my way through a tutorial that can be found at the link below: https://developers.google.com/sheets/api/quickstart/nodejs# When I reach the step of running the quick start file (node quickstart.js), I encounter the following err ...

javascriptnode.jsgoogle-apps-scriptgoogle-apps

Incorporate functionality into a button using jQuery

I am working on a table that displays data in different levels (Parent, Child, Grandson). When I click on the parent row, it expands to show new rows related to the child level. Similarly, clicking on a child row reveals a third level known as the grandson ...

javascriptjqueryhtmlcss

Can an in-progress NPM package be tested using NPX?

I am currently developing an NPM package that is designed to be used exclusively through npx *, similar to packages like create-nuxt-app. Is there a method to test my package using npx *? Essentially, I want to run my bin script without actually installin ...

javascriptnode.jsnpmnpx

No location matched any routes

I'm currently working on a notes application, and I've encountered an error when trying to edit the notes. The error message says "No routes matched location id ...". Any idea what could be causing this issue? The approach I'm taking is to ...

javascriptreactjs

Implementing Bootstrap tooltips in content that can be scrolled

I need help with positioning two containers, which you can view in this FIDDLE. Both containers may contain a lot of content, so I have applied overflow: auto to both of them. This is the HTML structure: <div id="maincontainer"> <d ...

javascriptjqueryhtmlcsstwitter-bootstrap

Display a collection of objects using Jade / Pug syntax

Struggling to find resources on Pug / Jade templating, turning to this platform for help. I've been diving into documentation on iterations along with consulting this helpful link. Working with Node.js, Express, and pug for a school project - a mock ...

javascriptnode.jsexpresspug

What is the best way to showcase information within a node framework?

I am looking to create a family tree using the MVC framework. Furthermore, I need to be able to insert data with relationships. I have object data that I would like to display along with its entities in a node structure. Any assistance on this matter wou ...

javascriptjqueryajaxasp.net-mvc-5family-tree

Attempting to incorporate icons into a Material UI table design

Hello, I've incorporated a Material UI table into one of my projects with a design concept similar to this - https://i.stack.imgur.com/i6Fsj.png I'm aiming to include icons within the tables. Here's the code I've worked on so far - ...

javascriptreactjsmaterial-ui

Implementing change event to activate select dropdown with jQuery

Is there a way to modify the code so that select2 and select3 are disabled by default, but become enabled only when an option is selected in the previous select dropdown (excluding the placeholder "Select your option")? In addition, I want the first place ...

javascriptjqueryhtml

Puppeteer: Eliminate hyperlinks on webpage

I am currently using Node.js and Puppeteer to convert a webpage into a .pdf-file. Everything functions as expected, however, I need assistance in removing all the links on the page before converting it to a .pdf. This is necessary because the resulting .p ...

javascriptnode.jspuppeteer

Arranging items into an array?

I have a query. Let me start by posting the HTML code, even though I know using tables for design is not recommended. However, in this case, it's only for educational purposes. <table id="placeholder"> <tr> <td><img src="img/ ...

javascriptjqueryarrays

The error "TypeError: ollama.chat is not a function" has occurred when trying to use the ollama module in

Currently, I am grappling with a Node.js project that requires me to utilize the ollama module (ollama-js). The problem arises when I invoke the async function chatWithLlama() which contains ollama.chat(), resulting in the following error being thrown: Ty ...

javascriptnode.jsfunctiontypeerrorollama

Issue with generating PDF in AngularJS: pdfMakeTypeError occurs due to inability to read 'ownerDocument' property within html2canvas

Whenever I try to export by clicking the export button, this code is triggered: $scope.export = function() { html2canvas(document.getElementById('balanceSheet')).then(function(canvas) { document.body.appendChild(canvas); ...

javascriptangularjshtml2canvaspdfmake

AngularJS is experiencing issues with its routing functionality

Currently, I am delving into the intricacies of angular js routing concepts as part of my learning journey. To explore this further, I have set up an inner folder within the app containing two sample test html pages. However, upon running the app, it fail ...

angularjsangularjs-directiveangularjs-routingngrouteangularjs-ng-route

Retrieving the value of a specific image using Jquery

<div id="choose"> <div class="picked"> <img src="/def/image1.png"> </div> <div> <img src="/def/image2.png"> </div> <div > <img src="/def/image3.png"> </div> </div& ...

javascriptjqueryhtml