AngularJS：在更改/键入/立即显示表单输入错误答案

【问题标题】：AngularJS: Show form input error on change / typing / immediatelyAngularJS：在更改/键入/立即显示表单输入错误
【发布时间】：2018-08-13 03:25:17
【问题描述】：

如果您在下面的示例中删除输入元素中的初始文本，那么在您模糊该元素之前它不会显示错误。

我想让输入元素下划线变成红色，当你删除输入中的最后一个字符时立即显示错误。

有人有什么想法吗？

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>

【问题讨论】：

这似乎是md-input-container 的一个怪癖；删除md-input-containter 显示ng-message 运行正常。我正在尝试研究这个问题，但我通常不使用 Material。
不要为了不丑的修复而屏住呼吸。不幸的是，Angular Material 1 处于可悲的忽视状态。
我从不放弃希望：P。我找到了答案，并发布了一种使用 Angular Material 解决此问题的方法。
你会看那个:)
@Sammi 您标记为正确的答案没有任何意义。请阅读md-is-error -material.angularjs.org/latest/api/directive/mdInputContainer 的文档。这是零效应解决方案，因为在这里使用testForm.testInput.$invalid 作为表达式具有零效应。另一方面，它为您的应用程序添加了一个新指令，由于性能提升可以避免该指令。

标签： javascript angularjs angularjs-material ng-messages

【解决方案1】：

这是在md-input-container 中触发动画的方式的一个怪癖。 Angular Material 有一个标志，允许您在检查输入是否有错误时进行更改，以最小化动画循环。默认值有点过于严格，但可以更改。

md-input-container 有一个可以添加的可选标志：md-is-error。这允许您传递一个表达式来控制何时检查输入是否有错误。

试试这个：<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>

【讨论】：

这根本没有任何区别。这也不会最小化“动画”循环，因为当$valid / $invalid 没有改变时，不会应用任何类更改，即使在我在这里的解决方案中也是如此。 testForm.testInput.$invalid / md-is-error 指令也将成为摘要循环的一部分，每次 ng-change 触发时都会触发。 IMO 这种方法将引发“动画”循环，因为还有一个指令（在本例中为 md-is-error）是摘要循环的一部分。
在同一个输入容器上使用testForm.testInput.$invalid作为表达式效果为零。
@lin 我们似乎在不同的页面上。该指令确实有影响。 md-container-input 的默认值是 both $touched (blur) 和 $invalid，如果其中任何一个不正确，则错误动画将被抑制并且错误不会传递给儿童（如 ng 消息）。更改为严格的$invalid 意味着如果错误发生在每次更改之后都会传递，而不仅仅是模糊。
@lin 在编辑代码并删除 ng-change 后，我确认我的答案仍然有效。我知道我已经测试过了，但是当我发布解决方案时，我只是将错误的代码复制到了我的答案中。

【解决方案2】：

实现此目的的一种方法是将ng-change="testForm.$setSubmitted()" 添加到您的输入中。这将直接触发更改时的表单验证。在ng-change 上使用testForm.$setSubmitted() 时，您需要检查您的依赖函数。也许您的应用程序中的一些其他行为可能会受到影响。

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

示例：

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>

【讨论】：

虽然这可行，但这是一个非常丑陋的解决方法，特别是如果表单中有其他元素依赖于表单的提交状态。问题不在于表单的状态，而在于md-input-container 如何处理其中包含的输入的验证；由于动画原因，它似乎会抑制更改直到模糊。