如何防止在angularjs中單擊按鈕時提交表單？

嗨，我正在angularjs中開發web應用程序。我設計了一個帶有一些文本框和多選擇dropDwn的表單。我使用下面的鏈接來建立多選擇dropDwn。如何防止在angularjs中單擊按鈕時提交表單？

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

下面是我的multi select 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然後雙擊我的驗證燒製的文本框中。當我點擊提交按鈕時驗證應該會觸發。我可以知道我該如何解決這個問題？謝謝。

來源

2017-08-14 Niranjan Godbole

您可以添加完整的示例嗎？很難告訴從掠奪者提供的... –

謝謝。我已添加完整的代碼。 –

[驗證表單域只在提交或用戶輸入]可能重複（https://stackoverflow.com/questions/17452247/validate-form-field-only-on-submit-or-user-input） –

如果你使用jQuery那麼你可以使用防止默認實現你是什麼後：

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

對於角度據我所知，在ng-click指令創建$event變量，它可以用當前的範圍。這可以引用到Java腳本事件，然後可以用它來調用stopPropagation。

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

來源

2017-08-14 12:36:04

謝謝。我沒有使用jQuery。我正在使用Angularjs –

道歉，請參閱更新的答案。 –

在瀏覽器中，我看到下面的代碼。 –

如何防止在angularjs中單擊按鈕時提交表單？

回答

相關問題