Question

您好我正在开发angularjs中的Web应用程序。我设计了一个带有一些文本框和多选择dropodwn的表单。我使用下面的链接来设置多选择dropodwn。

http://embed.plnkr.co/xWvfWYjaW7TThKZONkv5/

下面是我的多选择dropodwn。

<multiselect class="" multiple="true"
    ng-model="selectedCar"
    options="c.Location for c in locations"
    change="selected()" name="location" ng-required="true">
</multiselect>

我也有一些文本框如下。

<div>
    <span class="ang-error" style="color:#fff" ng-show="form2.IDCopyNo.$dirty && form2.IDCopyNo.$invalid ">
    <span ng-show="form2.IDCopyNo.$invalid && form2.IDCopyNo.$dirty">* {{'Required' | translate}}</span>
    </span>
</div>
<input class="with-icon" type="text" name="IDCopyNo" ng-model="IDCopyNo" required my-maxlength="32">

以下是我的完整代码。

<form name="form2" novalidate >
  <div class="inputblock" ng-class="{ 'has-error' : ((form2.$submitted && form2.location.$invalid)  || (form2.location.$invalid && form2.location.$dirty))}">
    <div>
      <span class="ang-error" style="color:#fff" ng-show="form2.location.$dirty">Select Location</span>
    </div>
    <multiselect class="" multiple="true" ng-model="selectedCar" options="c.Location for c in locations" change="selected()" name="location" ng-required="true">
    </multiselect>
  </div>
  <div class="inputblock" ng-class="{ 'has-error' : ((form2.$submitted && form2.IDCopyNo.$invalid )|| (form2.IDCopyNo.$invalid && form2.IDCopyNo.$dirty))}">
    <label class="inputblock-label" ng-show="user.IDCopyNo">{{ 'IDCopyNo' | translate }}</label>
    <div>
      <span class="ang-error" style="color:#fff" ng-show="form2.IDCopyNo.$dirty && form2.IDCopyNo.$invalid ">
       <span ng-show="form2.IDCopyNo.$invalid && form2.IDCopyNo.$dirty">* {{'Required' | translate}}</span>
      </span>
    </div>
    <input class="with-icon" type="text" name="IDCopyNo" placeholder="{{ 'IDCopyNo' | translate }}" ng-model="IDCopyNo" required my-maxlength="32">
  </div>
  <input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="saveDetail()">
</form>

现在的问题是每当我没有在我的文本框中输入值，如果我点击多选择dropodwn然后我的验证触发文本框。当我点击提交按钮时，验证应该触发。我可以知道如何解决这个问题？谢谢。

Answer 1

如果您使用的是jquery，那么您可以使用prevent default来实现您的目标：

jQuery("a").click(function(event){
    event.preventDefault();
});

for angular据我所知，ng-click指令创建了$event变量，该变量在当前作用域中可用。这可以引用Java Script事件，然后可以使用它来调用stopPropagation。

<button class="btn" ng-click="$event.stopPropagation();">
    Delete
</button>

单击angularjs中的按钮时如何防止表单提交？

1 个答案: