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类，即使我经历了两个字段并且保留为null。它也显示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不相似。只要尚未修改输入，输入将保持pristine。它是untouched，只要它没有松散焦点 - Angular doc states ng-touched应用{＃1}}时＃＆＃34;控件已经模糊＆＃34;。

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

它也可能是脏的和不受影响的 - 点击它，键入一些文字，但不点击其他任何地方。

要查看该内容，并查看有效的ng-touched，请参阅此jsFiddle。

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

ng-touching not working - AngularJS

1 个答案: