angularJS：ui-select 表单在单击 SUBMIT 按钮以外的按钮时验证答案

【问题标题】：angularJS: ui-select form validates on clicking a button other than SUBMIT buttonangularJS：ui-select 表单在单击 SUBMIT 按钮以外的按钮时验证
【发布时间】：2014-12-19 10:04:07
【问题描述】：

我对 angularJS 比较陌生。这是我的 HTML 代码：

<form name="form" ng-submit="submitForm(form.$valid)" novalidate>
    <div class="form-group col-md-offset-6" ng-class="{ 'has-error' : form.modelOwner.selected.$invalid && !form.modelOwner.selected.$pristine }">
    <div class="input-group select2-bootstrap-append">

      <ui-select ng-model="modelOwner.selected" theme="select2" class="form-control" required>
        <match placeholder="Select Owner">{{$select.selected.ownerName}}</match>
        <choices repeat="item in owner | filter: $select.search">
          <span ng-bind-html="item.ownerName | highlight: $select.search"></span>
        </choices>
      </ui-select>

      <span class="input-group-btn">
        <button ng-click="modelOwner.selected = undefined" class="btn btn-danger">
          <span class="glyphicon glyphicon-trash"></span>
        </button>
      </span>
      <span ng-show="form.modelOwner.selected.$invalid && !form.modelOwner.selected.$pristine" class="control-label">* Select owner.</span>
    </div>    
  </div>
</form>

我的JS代码是：

$scope.submitForm = function(isValid) {

  if (isValid) {
    alert('our form is amazing');
  }
  else{
    alert('our form is not valid');
  }

};

现在，在表单有效之前，“提交”按钮处于禁用状态。

但是，当我单击选择下拉列表旁边的“清除”按钮时，表单被提交并显示错误警报消息（我们的表单无效）。

CLEAR 按钮用于删除所有选定的下拉值。

我想不出这种奇怪行为的原因。请帮忙！

【问题讨论】：

在您提供的代码上看不到清除按钮？

标签： forms angularjs angular-ui

【解决方案1】：

将清除按钮的type 属性设置为button。

<button type="button" ng-click="clear()"></button>

【讨论】：

【解决方案2】：

<button class="btn btn-default btn-xs" ng-click="clear()">Clear</button>

$scope.clear = function() {
    $scope.country.selected = undefined;     
  };

<ui-select ng-model="country.selected" theme="selectize" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="country in countries | filter: $select.search">
      <span ng-bind-html="country.name | highlight: $select.search"></span>
      <small ng-bind-html="country.code | highlight: $select.search"></small>
    </ui-select-choices>
</ui-select>

【讨论】：