Как вручную запускать проверку по AngularJS с помощью кнопки за пределами тегов формы?

Question

Учитывая этот код:

<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/

Answer 1

Вы можете создать директиву, которые затем можно прикрепить к <a class="btn".... Проверьте jsfiddle

http://jsfiddle.net/dzjV4/2/

Заметьте, что я добавил к <input type='submit' id='clickMe'... и связал его со ссылкой на нижней <a class='btn' linked="clickMe"...

Answer 2

В идеале было бы программным способом вызвать проверки повторно запустить через форму. Я не исследовал это полностью, но имел ситуацию, требующую повторной проверки нескольких элементов управления на основе разных данных в области - без взаимодействия пользователя с отдельными элементами управления. Это возникло из-за того, что в форме были две кнопки действий, каждая из которых требовала различных правил проверки, когда они были нажаты.

Требование пользовательского интерфейса было изменено до того, как я полностью выполнил принудительное повторное подтверждение, но до того, как он получил большую часть того, что мне нужно, скопировав, а затем повторно установив данные формы. Эта принудительная повторная валидация по форме в пределах текущей области. В принципе, это по строкам следующего (не проверено, а взято из кода, который работал). В этом случае данные формы были привязаны к свойствам в одном объекте.

var formData = $parse(<form's model>); 
var dataCopy = angular.copy(formData($scope)); 
formData.assign($scope, dataCopy); 

Answer 3

Дайте вашу форме имя:

<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 
}) 

angular doc

Там нет никакого способа, чтобы вызвать браузер формы поведения вне формы. Вам следует сделать это вручную.

Answer 4

Это может или не может быть приемлемым, но если вы можете уйти с кнопку ВВЕСТИ быть отключена, пока форма не будет завершена, вы можете сделать это:

<form name="formName"> 
<input ng-required="true" /> 
</form> 
<button ng-click="someFunction()" ng-disabled="formName.$invalid" /> 

Стоит также отметить, что это работает в IE9 (если вы беспокоитесь об этом).

Answer 5

Поскольку мои поля формы показывать только сообщения проверки, если поле является недействительным, и трогало пользователь:

<!-- 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; 
} 

Answer 6

for (control of $scope.[form name].$$controls) { 
     control.$setDirty(); 
     control.$validate(); 
    } 

Вы можете попробовать вышеуказанные коды. Запустите его перед отправкой.