7
Tôi có phần tử biểu mẫu được tạo bằng AngularJS có nút gửi bên trong và tôi muốn đặt nút này bên ngoài biểu mẫu này. Làm thế nào tôi có thể làm điều đó với Angular và có hình thức của tôi vẫn còn xác nhận?Làm cách nào để xác thực biểu mẫu khi nút gửi ở bên ngoài biểu mẫu này, với angularJs?
ví dụ mã html chính:
<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 -->
ví dụ mẫu mã html:
<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>
ví dụ mã điều khiển:
(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
ví dụ app.js đang
(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));
Không phải là góc được xây dựng trên jQuery để bạn có thể chỉ cần đính kèm một trình lắng nghe sự kiện để gửi biểu mẫu khi một phần tử nhấp bằng cách sử dụng .send()? do đó, như:
–Điều tôi muốn làm là giữ nút gửi bị tắt nếu các trường biểu mẫu chưa hoàn thành và khi bạn nhấp vào nút để bật biểu mẫu sau. Nhưng điều này không hiệu quả với tôi nếu tôi có các nút bên ngoài biểu mẫu – Fanatic
Có thể hoàn toàn có thể với các chỉ thị ng được đưa ra? hoặc một cái gì đó tương tự? –