javascript - ng-touched 不工作-AngularJS

Question

表单字段未添加 ng-touched 类，而是保持 ng-pristine

这是我的表格:

<form novalidate class="css-form">

            <div class="form-group clearfix">
                <label class="col-xs-12 col-sm-6 col-md-4">State Code</label>
                <div class="col-xs-12 col-sm-6 col-md-8">
                    <input type="text" class="form-control" ng-maxlength="2" ng-model="ObjectNew.stateCode" required>
                </div>
            </div>
            <div class="clearfix"></div>

            <div class="form-group clearfix">
                <label class="col-xs-12 col-sm-6 col-md-4">Zip</label>
                <div class="col-xs-12 col-sm-6 col-md-8">
                    <input type="text" class="form-control" ng-model="ObjectNew.zip" required>
                </div>
            </div>
            <div class="clearfix"></div>

        </form>

当我在 inspect 元素中看到时，它确实只在每个字段上显示 ng-pristine 类，即使我遍历了两个字段并留空。它也显示 ng-invalid，这很好。

必须实际添加样式:

.css-form input.ng-invalid.ng-touched {
    background-color: #FA787E !important;
    }

  .css-form input.ng-valid.ng-touched {
    background-color: #78FA89 !important;
  }

Answer 1

术语pristine 和touched 并不相似。只要输入未被修改，它就会保持原始状态。它未受影响，只要它没有失去焦点 - Angular doc states ng-touched 在“控件已模糊”时应用。

因此输入可能是原始的和触摸的 - 只需单击它，然后在不输入任何内容的情况下单击其他地方。

它也可能是脏的和未被触及的 - 单击它，输入一些文本，但不要单击其他任何地方。

要了解这一点，并查看正在运行的 ng-touched，请参阅此 jsFiddle .

为确保它有效，请使用 @dfsq 指出的 Angular 1.3。此外，使用与您的 Angular 版本相匹配的 angular-touch。上面的 JSFiddle 工作正常。