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

С учетом этого кода:

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

Я хочу, чтобы последняя кнопка вызывала проверку (затем отправляла, когда все было действительно) в первой форме. На данный момент только кнопка внутри формы может инициировать проверку и отправку формы. Есть ли какой-либо возможный способ для кнопки вне формы?

Live test: http://jsfiddle.net/dzjV4/1/

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

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

Ответ 4

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

<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

Невозможно вызвать поведение формы браузера вне формы. Вы должны сделать это вручную.

Ответ 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;
}

Ответ 6

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

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