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

时间:2016-04-06 12:30:10

标签: javascript angularjs html5 twitter-bootstrap angular-bootstrap

我有一个由Bootstrap设计的Angular表单,其中包含一个必填字段。提交并重置表单后,将出现HTML5验证工具提示,指示必填字段:

Tooltip

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

重置表单后如何禁止工具提示?

这是一个正在运行的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 = ""
}

1 个答案:

答案 0 :(得分:2)

只需添加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>

那么它会起作用

欢呼声