7
내 안에 제출 버튼이있는 AngularJS로 만든 양식 요소가 있는데이 버튼을이 양식 외부에 놓고 싶습니다. Angular로 어떻게 할 수 있습니까?제출 단추가이 양식의 외부에 있으며 angularJs가있는 경우 양식의 유효성을 검사하는 방법은 무엇입니까?
예컨대 메인 HTML 코드 :
<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 -->
예컨대 양식 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>
예컨대 컨트롤러 번호 :
(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
예컨대 app.js 코드
(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));
는 각 아닌가 jQuery에 내장되어 있으므로 .send()를 사용하여 요소를 클릭 할 때 양식을 제출하기 위해 이벤트 리스너를 부착 할 수 있습니까? 그래서 같은 <양식 ID = "폼"> <= "버튼"버튼 ID> –
양식 필드가 완료되지 않았거나 버튼을 클릭하여 다음 양식을 사용하도록 설정 한 경우 제출 버튼을 비활성화 된 상태로 유지하려고합니다. 그러나 이것은 폼 외부에있는 버튼을 가지고 있다면 나에게 효과가 없다. – Fanatic
ng-directives를 사용하여 완전히 가능해야한다? 같은가요? –