[英]How to manually trigger AngularJS validation from a button outside of the form tags?
鑒於此代碼:
<div ng-controller="MyCtrl">
<form ng-submit="onSubmitted()">
Header inputs:
<input type="name" ng-model="sample" required/>
<input type="name" ng-model="sampleX" required/>
<input type="submit" value="This submit triggers validation. But I wanted to put this button at the end of the page"/>
</form>
<hr/>
Some other form here. Think line items
<hr />
<a class="btn" ng-click="/* what could should be put here, so this can trigger the firt form's validation, then submit? */">Wanted this submit button to trigger the validation+submit on the form in which this button doesn't belong</a>
</div>
var app = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.onSubmitted = function() {
alert('submitted!');
};
}
我希望最后一個按鈕在第一個表單上觸發驗證(然后在事情有效時提交)。 截至目前,只有表單內的按鈕可以觸發該表單的驗證和提交。 表單外的按鈕有什么可能的方法來做到這一點嗎?
現場測試: http : //jsfiddle.net/dzjV4/1/
您可以創建指令,然后將其附加到<a class="btn"...
。 檢查這個jsfiddle
請注意,我添加到<input type='submit' id='clickMe'...
並將其與底部的鏈接鏈接<a class='btn' linked="clickMe"...
for (control of $scope.[form name].$$controls) {
control.$setDirty();
control.$validate();
}
你可以試試上面的代碼。 在提交之前讓它運行。
理想情況下,應該有一種編程方式來使驗證在表單上重新運行。 我還沒有完全調查過,但有一種情況需要根據范圍內的不同數據重新驗證多個控件 - 無需用戶與單個控件交互。 這是因為表單有兩個操作按鈕,每個按鈕在單擊時都需要不同的驗證規則。
在我完全實施強制重新驗證之前,UI 要求發生了變化,但在此之前,我通過復制然后重新設置表單數據獲得了大部分我需要的內容。 這會強制在當前范圍內跨表單重新驗證。 基本上,它遵循以下幾行(未經測試,但取自正在運行的代碼)。 在這種情況下,表單的數據綁定到一個對象中的屬性。
var formData = $parse(<form's model>);
var dataCopy = angular.copy( formData($scope) );
formData.assign( $scope, dataCopy );
這可能是也可能不可接受,但是如果您可以在表單完成之前禁用提交按鈕,您可以這樣做:
<form name="formName">
<input ng-required="true" />
</form>
<button ng-click="someFunction()" ng-disabled="formName.$invalid" />
還值得注意的是,這適用於 IE9(如果您擔心的話)。
為您的表單命名:
<div ng-controller="MyCtrl">
<form name="myForm">
<input name="myInput" />
</form>
</div>
因此,您可以在范圍內訪問表單驗證狀態。
app.controller('MyCtrl', function($scope) {
$scope.myForm.$valid // form valid or not
$scope.myForm.myInput // input valid or not
// do something with myForm, e.g. display a message manually
})
無法在表單之外觸發瀏覽器表單行為。 您必須手動執行此操作。
由於我的表單字段僅在字段無效且已被用戶觸摸時才顯示驗證消息:
<!-- form field -->
<div class="form-group" ng-class="{ 'has-error': rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched && rfi.rfiForm.stepTwo.Parent_Suffix__c.$invalid }">
<!-- field label -->
<label class="control-label">Suffix</label>
<!-- end field label -->
<!-- field input -->
<select name="Parent_Suffix__c" class="form-control"
ng-options="item.value as item.label for item in rfi.contact.Parent_Suffixes"
ng-model="rfi.contact.Parent_Suffix__c" />
<!-- end field input -->
<!-- field help -->
<span class="help-block" ng-messages="rfi.rfiForm.stepTwo.Parent_Suffix__c.$error" ng-show="rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched">
<span ng-message="required">this field is required</span>
</span>
<!-- end field help -->
</div>
<!-- end form field -->
我能夠使用由按鈕觸發的此代碼來顯示我的無效字段:
// Show/trigger any validation errors for this step
angular.forEach(vm.rfiForm.stepTwo.$error, function(error) {
angular.forEach(error, function(field) {
field.$setTouched();
});
});
// Prevent user from going to next step if current step is invalid
if (!vm.rfiForm.stepTwo.$valid) {
isValid = false;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.