Come attivare manualmente la convalida di AngularJS da un pulsante al di fuori dei tag del modulo?

Question

Dato questo codice:

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

voglio l'ultimo pulsante per attivare la convalida (quindi inviare quando le cose sono validi) al primo modulo. A partire da ora, solo il pulsante all'interno del modulo può attivare la convalida e l'invio di quel modulo. C'è un modo possibile per un pulsante al di fuori del modulo per farlo?

prova dal vivo: http://jsfiddle.net/dzjV4/1/

Answer 1

È possibile creare direttiva, che è quindi possibile allegare a <a class="btn".... Controllare questo jsfiddle

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

Si noti che ho aggiunto al <input type='submit' id='clickMe'... e collegato con link in fondo <a class='btn' linked="clickMe"...

Answer 2

Idealmente ci sarebbe un modo programmatico per causare la convalida da eseguire nuovamente attraverso una forma. Non l'ho studiato completamente ma ho avuto una situazione che richiedeva la convalida di più controlli sulla base di dati diversi nell'ambito - senza che l'utente interagisse con i singoli controlli. Ciò è dovuto al fatto che il modulo aveva due pulsanti di azione che richiedevano l'applicazione di regole di convalida diverse quando venivano cliccati.

Il requisito dell'interfaccia utente è cambiato prima di implementare completamente la ri-validazione, ma prima ho ottenuto la maggior parte di ciò che mi serviva copiando e quindi reimpostando i dati del modulo. Questa convalida forzata attraverso il modulo nell'ambito corrente. Fondamentalmente, è sulla falsariga di quanto segue (non testato, ma preso dal codice che funzionava). In questo caso i dati del modulo sono stati associati alle proprietà in un oggetto.

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

Answer 3

Lascia la tua forma un nome:

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

in modo da poter accedere al tuo stato di convalida modulo a vostra portata.

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

Non v'è alcun modo per attivare il browser comportamento forma al di fuori di un modulo. Devi fare questo manualmente.

Answer 4

Questo può o non può essere accettabile, ma se si riesce a cavarsela con il tasto INVIA essere disattivato fino a quando il modulo è completato, si può fare questo:

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

E 'anche interessante notare che questo funziona in IE9 (se sei preoccupato per questo).

Answer 5

Dato che i miei campi del modulo mostrano solo messaggi di convalida se un campo non è valido, ed è stata toccata da parte dell'utente:

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

ero in grado di utilizzare questo codice innescato da un pulsante per mostrare i miei campi non validi:

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

È possibile provare i codici di cui sopra. Fatelo funzionare prima di inviare.