Angular-Bootstrap 表单重置后不显示验证工具提示

Question

我有一个 Angular 样式为 Bootstrap 的表单，其中包含必填字段。提交并重置表单后，出现 HTML5 验证工具提示，指示必填字段：

我发现这非常不一致，因为如果该字段以任何其他方式聚焦在空状态，则工具提示不会出现。

如何在重置表单后取消工具提示？

这是一个运行Plunker

表格：

<form class="form-horizontal" name="testForm">
  <div class="form-group">
    <label class="col-sm-2 control-label" for="current-input">Input:</label>
    <div class="col-sm-10">
      <div class="input-group">
        <input name="current-input" class="form-control" ng-model="current_input" required />
        <span class="input-group-btn"><button class="btn btn-primary" type="submit" ng-click="check()">Check</button></span>
      </div>
    </div>
  </div>
</form>

控制器：

$scope.check = function() {
  $scope.testForm.$setPristine();
  $scope.testForm.$setUntouched();
  $scope.last_input = $scope.current_input;
  $scope.current_input = ""
}

Answer 1

只需添加 ng-submit 并设置检查功能，而不是通过 onclick 调用检查，因为您已经指定按钮类型提交，如下所示：

<form class="form-horizontal" name="testForm" ng-submit="check()">

......

      <span class="input-group-btn"><button class="btn btn-primary" type="submit" >Check</button></span>

然后就可以了

干杯

Angular-Bootstrap 表单重置后不显示验证工具提示

Angular-Bootstrap don't show validation tooltip after form reset

html

javascript

twitter-bootstrap

angularjs

angular-bootstrap