Jak ręcznie uruchomić sprawdzanie poprawności AngularJS z przycisku znajdującego się poza znacznikami formularza?

Question

Biorąc pod uwagę ten kod:

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

Chcę ostatni guzik, aby uruchomić walidację (potem złożyć, gdy rzeczy są ważne) na pierwszej postaci. W tej chwili tylko przycisk wewnątrz formularza może spowodować zatwierdzenie i przesłanie formularza. Czy istnieje jakiś sposób na przycisk poza formularzem, aby to zrobić?

żywo Test: http://jsfiddle.net/dzjV4/1/

Answer 1

Można tworzyć dyrektywy, które można następnie dołączyć do <a class="btn".... Sprawdź ten jsfiddle

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

pamiętać, że dodatek do <input type='submit' id='clickMe'... i związał ją z linku na dole <a class='btn' linked="clickMe"...

Answer 2

Idealnie byłoby sposób programowy powoduje walidację ponownego uruchomienia całej postaci. Nie zbadałem tego całkowicie, ale miałem sytuację, która wymagała ponownego sprawdzenia wielu kontrolek na podstawie różnych danych w zakresie - bez interakcji użytkownika z poszczególnymi kontrolami. Stało się tak dlatego, że formularz miał dwa przyciski akcji, z których każdy wymagał różnych reguł walidacji, gdy były klikane.

Wymóg UI zmienił się zanim w pełni zaimplementowałem wymuszenie ponownego sprawdzania poprawności, ale zanim to zrobiłem, dostałem większość tego, czego potrzebowałem, kopiując, a następnie ponownie ustawiając dane formularza. To wymusiło ponowną walidację w formularzu w ramach bieżącego zakresu. Zasadniczo jest to zgodne z następującymi (nie testowane, ale wzięte z kodu, który działał). W tym przypadku dane formularza zostały powiązane z właściwościami w jednym obiekcie.

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

Answer 3

Daj formularzu nazwę:

<div ng-controller="MyCtrl"> 
    <form name="myForm"> 
     <input name="myInput" /> 
    </form> 
</div> 

czemu można uzyskać dostęp statusu walidacji formularza na swoim zakresie.

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

Nie ma sposobu, aby wywołać formularz zachowanie przeglądarki poza formę. Musisz to zrobić ręcznie.

Answer 4

To może lub nie może być dopuszczalne, ale czy można uciec przycisk WYŚLIJ jest wyłączony aż formularz jest zakończone, można to zrobić:

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

Warto również zauważyć, że to działa w IE9 (jeśli się o to martwisz).

Answer 5

Ponieważ moje pola formularza pokazać tylko wiadomości walidacji jeśli pole jest nieprawidłowy i został dotknięty przez użytkownika:

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

byłem w stanie wykorzystać ten kod uruchamiany za pomocą przycisku, aby pokazać moje nieprawidłowe pola:

// 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(); 
    } 

można spróbować powyższe kody. Zrób to działa przed przesłaniem.