表单 $dirty 在 typeahead 选择时为假答案

【问题标题】：Form $dirty is false on typeahead select表单 $dirty 在 typeahead 选择时为假
【发布时间】：2019-07-17 04:23:06
【问题描述】：

$dirty 即使在从下拉列表中选择了值之后也是假的。有没有设置脏标志的替代方法？

JSBin here

【问题讨论】：

标签： angularjs forms angular-ui-bootstrap typeahead

【解决方案1】：

您可以结合ng-change 函数（docs）自行将输入值设置为$dirty。编辑：我发现使用 ui-bootstrap 最好使用typeahead-on-select，因为它不适用于ng-change。

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', function($scope, $http) {

  var _selected;

  $scope.selected = undefined;
  $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];

  $scope.x = {
    User: {
      username: ''
    }
  };
})

.typeahead-demo .custom-popup-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  background-color: #f9f9f9;
}

.typeahead-demo .custom-popup-wrapper>.message {
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
  color: #868686;
}

.typeahead-demo .custom-popup-wrapper>.dropdown-menu {
  position: static;
  float: none;
  display: block;
  min-width: 160px;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<body ng-app="ui.bootstrap.demo">
  <script type="text/ng-template" id="customTemplate.html">
    <a>
      <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
      <span ng-bind-html="match.label | uibTypeaheadHighlight:query"></span>
    </a>
  </script>

  <script type="text/ng-template" id="customPopupTemplate.html">
    <div class="custom-popup-wrapper" ng-style="{top: position().top+'px', left: position().left+'px'}" style="display: block;" ng-show="isOpen() && !moveInProgress" aria-hidden="{{!isOpen()}}">
      <p class="message">select location from drop down.</p>

      <ul class="dropdown-menu" role="listbox">
        <li class="uib-typeahead-match" ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
          <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
        </li>
      </ul>
    </div>
  </script>

  <div class='container-fluid typeahead-demo' ng-controller="TypeaheadCtrl">
    <form name="testForm">
      <h4>Static arrays</h4>
      <pre>Model: {{selected | json}} </pre>
      <input type="text" ng-model="x.User.username" typeahead-on-select='testForm.$setDirty();' uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" class="form-control" typeahead-min-length="0">
      <input ng-model="x.User.username" required/>
    </form>
    {{testForm.$dirty}}
  </div>
</body>

当然，您也可以在控制器内部移动逻辑。我希望这会有所帮助。

【讨论】：

最好使用$setDirty()方法。它将更新课程并通知ngFormController。
谢谢@georgeawg！我更新了答案以反映这一点