javascript - AngularJS: Show form input error on changetypingimmediately

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=".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=".6.7/angular.min.js"></script>
  <script src=".6.7/angular-animate.min.js"></script>
  <script src=".6.7/angular-aria.min.js"></script>
  <script src=".6.7/angular-messages.min.js"></script>
  <script src=".1.6/angular-material.min.js"></script>
</body>
</html>

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./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./ajax/libs/angularjs/1.6.7/angular.min.js"></script>
  <script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.7/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.7/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.7/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis./ajax/libs/angular_material/1.1.6/angular-material.min.js"></script>
</body>
</html>

Share edited Mar 5, 2018 at 13:32 Pac0 23.3k9 gold badges73 silver badges83 bronze badges asked Mar 5, 2018 at 12:58 Sámal Rasmussen 3,5251 gold badge38 silver badges43 bronze badges

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. – Claies 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. – Sámal Rasmussen 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. – Claies Commented Mar 5, 2018 at 14:01
Would you look at that :) – Sámal Rasmussen 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/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. – lin Commented Mar 5, 2018 at 14:34

| Show 6 more ments

2 Answers 2

Sorted by: 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./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./ajax/libs/angularjs/1.6.7/angular.min.js"></script>
  <script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.7/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.7/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.7/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis./ajax/libs/angular_material/1.1.6/angular-material.min.js"></script>
</body>
</html>

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./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./ajax/libs/angularjs/1.6.7/angular.min.js"></script>
  <script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.7/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.7/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.7/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis./ajax/libs/angular_material/1.1.6/angular-material.min.js"></script>
</body>
</html>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744856661a4597447.html

javascript - AngularJS: Show form input error on changetypingimmediately - Stack Overflow

2 Answers 2

Example:

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - AngularJS: Show form input error on changetypingimmediately - Stack Overflow

2 Answers 2

Example:

相关推荐