3

If you delete the initial text that is in the input element in the example below, then it will not show an error until you blur the element.

I want to have the input element underline turn red and the error show immediately when you delete the last character in the input.

Any ideas somebody?

var app = angular.module('myApp', ['ngMaterial', 'ngMessages']);

app.controller('DemoCtrl', function() {
  this.name = 'test text';
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular JS</title>
  <link
    rel="stylesheet"
    href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.6/angular-material.min.css">
</head>
<body ng-app="myApp">
  <div ng-controller="DemoCtrl as demo">
    <form name="testForm">
      <md-input-container>
        <input
          name="testInput"
          ng-model="demo.name"
          required
          aria-label="test input"
          type="text">
        <ng-messages
          for="testForm.testInput.$error"
          role="alert">
          <ng-message when="required">
            <span>
              required
            </span>
          </ng-message>
        </ng-messages>
      </md-input-container>
    </form>
  </div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.6/angular-material.min.js"></script>
</body>
</html>

Improve this question
11
  • this seems to be a quirk with md-input-container; Removing the md-input-containter shows the ng-message operating normally. I am trying to research the problem but I don't work with Material usually. Commented Mar 5, 2018 at 13:34
  • Don't hold your breath for a non-ugly fix. Unfortunately Angular Material 1 is in a state of woeful neglect. Commented Mar 5, 2018 at 13:44
  • I never give up hope :P. I found the answer, and posted a way to solve this using Angular Material. Commented Mar 5, 2018 at 14:01
  • Would you look at that :) Commented Mar 5, 2018 at 14:05
  • @Sammi the answer you marked as right doesn't make any sense. Please read the documentation of md-is-error -material.angularjs.org/latest/api/directive/mdInputContainer. It's zero effect solution because using testForm.testInput.$invalid as expression has zero effect here. On the other hand it adds a new directive to your application which can be avoided due to performance boosts. Commented Mar 5, 2018 at 14:34

2 Answers 2

Reset to default
4

This is a quirk with the way the animations are triggered within an md-input-container. Angular Material has a flag that allows you to change when the input is checked for errors, to minimize the animation loop. The defaults are a bit too restrictive, but can be changed.

md-input-container has an optional flag that can be added: md-is-error. This allows you to pass an expression to control when the input is checked for errors.

try this: <md-input-container md-is-error="testForm.testInput.$invalid">

var app = angular.module('myApp', ['ngMaterial', 'ngMessages']);

app.controller('DemoCtrl', function() {
  this.name = 'test text';
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular JS</title>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.6/angular-material.min.css">
</head>
<body ng-app="myApp">
  <div ng-controller="DemoCtrl as demo">
    <form name="testForm">
      <md-input-container md-is-error="testForm.testInput.$invalid">
        <input name="testInput"
               ng-model="demo.name"
               required
               aria-label="test input"
               type="text">
        <ng-messages for="testForm.testInput.$error" role="alert">
          <ng-message when="required">
            <span>
              required
            </span>
          </ng-message>
        </ng-messages>
      </md-input-container>
    </form>
  </div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.6/angular-material.min.js"></script>
</body>
</html>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This doesn't make any difference at all. This also does not minimize the "animation" loop since there will be no class changes applied when $valid / $invalid hasn't changed, even in my solution in here. Also testForm.testInput.$invalid / md-is-error directive will be a part of the digest cycle which will be triggered every time ng-change triggers. IMO this approach will raise the "animation" loop because one more directive (in this case md-is-error) is a part of the digest cycle.
Using testForm.testInput.$invalid as expression on the same input container has zero effect.
@lin We seem to be on different pages here. The directive does have an impact. The default for md-container-input is both $touched (blur) and $invalid, and if either of these are not true, then the error animations are suppressed and the errors are not passed out to the children (like ng-messages). changing to strictly $invalid means that the errors are passed down if they happen after every change, rather than only on blur.
@lin after editing the code and removing the ng-change, I confirmed that my answer still works. I knew that I had tested it, but I had just copied the wrong code into my answer when I posted the solution.
3

One way to achieve this is by adding ng-change="testForm.$setSubmitted()" to your inputs. This will directly trigger the form validation on change. While using testForm.$setSubmitted() on ng-change your need to check your dependend functions. Maybe some other behaviors inside your application could be effected.

<input name="testInput"
       ng-model="demo.name"
       ng-change="testForm.$setSubmitted()"
       required
       aria-label="test input"
       type="text">

Example:

var app = angular.module('myApp', ['ngMaterial', 'ngMessages']);

app.controller('DemoCtrl', function() {
  this.name = 'test text';
});
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Angular JS</title>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.6/angular-material.min.css">
</head>
<body ng-app="myApp">
  <div ng-controller="DemoCtrl as demo">
    <form name="testForm">
      <md-input-container>
        <input name="testInput"
               ng-model="demo.name"
               required
               aria-label="test input"
               ng-change="testForm.$setSubmitted()"
               type="text">
        <ng-messages for="testForm.testInput.$error" role="alert">
          <ng-message when="required">
            <span>
              required
            </span>
          </ng-message>
        </ng-messages>
      </md-input-container>
    </form>
  </div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.6/angular-material.min.js"></script>
</body>
</html>

Improve this answer

1 Comment

while this works, this is a pretty ugly workaround, especially if you have other elements in the form that rely upon the submitted state of the form. The problem isn't really with the state of the form, it's with how md-input-container handles the validation of the input contained within; it appears to suppress the changes until blur for animation reasons.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.