So überprüfen Sie ein Formular, wenn der submit-button ist außerhalb dieser form, mit angularJs?
Habe ich ein Formular-element erstellt mit AngularJS mit einem submit-button innerhalb es, und ich würde gerne diese Taste außerhalb dieser form. Wie kann ich das machen mit Winkel-und habe meine form noch validiert?
e.g Haupt-html-code:
<div class="sd-chk-steps" ng-show="!step_03" ng-hide="step_03">
<!-- Panel Address -->
<div id="sd-p-chk-1" class="large-8 columns sd-p-chk">
<div class="cover step_complete" ng-show="step_01" ng-hide="!step_01">
</div>
<sd-panel-address >
<!-- first form -->
</sd-panel-address>
</div>
<!-- /. Panel Address -->
<!-- Panel delivery -->
<div id="sd-p-chk-2" class="large-8 columns sd-p-chk">
<div class="cover" ng-show="!step_01" ng-hide="step_01"></div>
<sd-panel-delivery>
<!-- second form -->
</sd-panel-delivery>
<div class="cover step_complete" ng-show="step_02" ng-hide="!step_02"></div>
</div>
<!-- /. Panel delivery -->
<!-- Panel payment -->
<div id="sd-p-chk-3" class="large-8 columns sd-p-chk">
<div class="cover" ng-show="!step_02" ng-hide="step_02"></div>
<sd-panel-payment>
<!-- third form -->
</sd-panel-payment>
</div>
<!-- /. Panel payment -->
<!-- group botton submit -->
<div class="sd-chk-box">
<div class="sd-chk-box-inner">
<div class="large-8 columns sd-box-chk-btn sd-chk-btn-sm">
<button ng-click="clickBtn(shipping.$valid)" type="submit" class="sd-chk-btn sd-button-cta" ng-disabled="shipping.$invalid">
Next
</button>
</div>
<div class="large-8 columns sd-box-chk-btn sd-chk-btn-sm">
<button class="sd-chk-btn sd-button-cta" ng-click="clickBtnStep02(formDelivery.$valid)" ng-disabled="formDelivery.$invalid">
NEXT
</button>
</div>
<div class="large-8 columns sd-box-chk-btn sd-chk-btn-sm">
<button class="sd-chk-btn sd-button-cta" ng-click="clickBtnStep03(payment.$valid)" ng-disabled="payment.$invalid">
PLACE ORDER
</button>
</div>
</div>
</div>
<!-- /. group botton submit -->
e.g-form html-code:
<form id="shipping" class="shipping" name="shipping"
novalidate
ng-submit="form.submit(shipping.$valid)"
ng-class="{'loading': form.submitting, 'is-el-dirty' : shipping.$dirty || shipping.dirty}">
<fieldset>
<div class="row">
<div class="large-12 columns">
<label>
<input type="text" name="name" placeholder="Name" ng-model="form.data.name" required/>
</label>
<div class="error" ng-if="shipping.$submitted || shipping.name.$touched" ng-messages="shipping.name.$error">
<p class="text-msg" ng-message="required">You did not enter your name</p>
</div>
</div>
<div class="large-12 columns">
<label>
<input type="text" name="surname" placeholder="Surname" ng-model="form.data.surname" required/>
</label>
<div class="error" ng-if="shipping.$submitted || shipping.surname.$touched" ng-messages="shipping.surname.$error">
<p class="text-msg" ng-message="required">You did not enter your Surname</p>
</div>
</div>
</div>
</fieldset>
</form>
e.g controller-code:
(function() {
'use strict';
/**
* @ngdoc function
* @name myApp.controller:globalCtrl
* @description
* # globalCtrl
* Controller of the myApp
*/
var myApp = angular.module('myApp');
myApp.controller('globalCtrl', function($scope, $locale, $rootScope) {
//Check if checkbox it's checked
$scope.checked = true;
//got to step 2
$scope.clickBtn = function(form) {
//valid form
if (form === true) {
console.log('Form is valid, $rootScope.step_01= ' + $rootScope.step_01);
$rootScope.step_01 = true;
$rootScope.notValidStpe_01 = true;
}
//invalid form
if (form === false) {
$rootScope.step_01 = false;
$rootScope.notValidStpe_01 = false;
console.log('Form is invalid, $rootScope.step_01= ' + $rootScope.step_01);
}
};
//got to step 3
$scope.clickBtnStep02 = function(form) {
//valid form
if (form === true) {
console.log('Form is valid, $rootScope.step_02 "'+ $rootScope.step_02);
$rootScope.step_02 = true;
$rootScope.notValidStpe_02 = true;
}
//invalid form
if (form === false) {
$rootScope.step_02 = false;
$rootScope.notValidStpe_02 = false;
console.log('Form is invalid, $rootScope.step_02= ' + $rootScope.step_02);
}
};
//All steps completed
$scope.clickBtnStep03 = function(form) {
//valid form
if (form === true) {
console.log('Form is valid, $rootScope.step_03 "'+ $rootScope.step_03);
$rootScope.step_03 = true;
$rootScope.notValidStpe_03 = true;
}
//invalid form
if (form === false) {
$rootScope.step_03 = false;
$rootScope.notValidStpe_03 = false;
console.log('Form is invalid, $rootScope.step_03= ' + $rootScope.step_03);
}
};
});
}(window, window.angular));enter code here
e.g app.js code
(function() {
'use strict';
var myApp = angular
.module('myApp', [
'ngResource',
'ngAnimate',
'ngMessages',
'templates'
]);
myApp.run(function($rootScope) {
$rootScope.step_01 = false;
$rootScope.step_02 = false;
$rootScope.step_03 = false;
$rootScope.notValidStpe_01 = false;
$rootScope.notValidStpe_02 = false;
$rootScope.notValidStpe_03 = false;
});
}(window, window.angular));
- Ist nicht eckig basiert auf jQuery, so konnte man nur fügen Sie einen Ereignis-listener, um das Formular abschicken auf ein element klicken mit .send() ? so wie: <form id="Formular"><input/></form> <button id="button"></button> <script> $("#Knopf").klicken Sie auf(Funktion() { $("#form").submit(); }); </script>
- Was ich will zu tun zu halten, ist die Schaltfläche senden deaktiviert, wenn die Felder nicht vollständig ausgefüllt sind und wenn Sie auf die Schaltfläche aktivieren Sie das folgende Formular aus. Aber das funktioniert nicht mit mir, wenn ich die Tasten außerhalb der form
- Es sollte absolut möglich mit der ng-Richtlinien gegeben? <button ng-disabled="checkFormValidity();" ></button> oder etwas ähnliches?
- Winkel ist kompatibel mit jQuery, aber definitiv nicht darauf aufgebaut. Eckig, folgt einem radikal anderen design principe als jQuery.
Du musst angemeldet sein, um einen Kommentar abzugeben.
So, ich verstehe, Sie versuchen zu tun, Formular-wizzard. Allerdings brauchen Sie nicht mehrere Formular-element, benutzen Sie Einfach ein Formular-element an der Spitze. Für untergeordnete Nutzung der form ng-form-Richtlinie zu valiadate Sie separat.
Finden Sie eine ausführliche Dokumentation https://docs.angularjs.org/api/ng/directive/ngForm über die Verwendung von ng-form
So etwas
Der Hinweis ist mit der ngForm Richtlinie und weisen Sie ein Formular das name-Attribut, welche Hinweise auf den $rootScope.
Funktioniert.
current = {}
und verwenden Sie dann<form name="current.form" ... >
form
Attribut funktioniert nicht in jedem IE. caniuse.com/#feat=form-attributeWenn der submit-button ist außerhalb der form, dann können Sie wickeln Sie Ihre Schaltfläche und form mit einem ngForm (ja, ngForms können geschachtelt werden). Geben Sie Ihre ngForm einen Namen, so dass Sie verarbeiten kann die submit klicken und auf die form-Objekt mit Namen in demselben Gültigkeitsbereich Kontext
Sogar präziser als diese Antwort:
(Beachten Sie, dass Sie brauchen noch nicht einmal zu definieren
myForm
im zugrunde liegenden controller und du kannst Sie auch weglassen dieform
Attribut.)ng-message
für$error
auf verschiedene Elemente sind nie aufgerufen, d.h., die Fehlermeldungen im Zusammenhang mit der Formular-Elemente, falls vorhanden, werden nicht genannt.