jinql
/
blur-admin
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Personal info form.

pull/3/head
smartapant 2016-01-05 19:44:49 +03:00
parent be1d2e00f8
commit 4c08699728
3 changed files with 53 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/app/pages/form/wizard/wizardPage.html
View File

@ -3,27 +3,39 @@
<div class="row">
<div class="col-md-12">
<blur-panel title="Form Wizard" class-container="with-scroll">
<ba-wizard>
<ba-wizard-tab title="Personal info" completeness="vm.personalInfoForm.$valid">
<form name="vm.personalInfoForm" novalidate>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" name="email" placeholder="Email" ng-model="vm.personalInfo.email" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" name="password" placeholder="Password" ng-model="vm.personalInfo.password" required>
</div>
<div class="checkbox">
<label class="custom-checkbox">
<input type="checkbox">
<span>Check me out</span>
</label>
</div>
<button type="submit" class="btn btn-danger">Submit</button>
</form>
</ba-wizard-tab>
<ba-wizard-tab title="Product Info" completeness="vm.productInfoForm.$valid">
<ba-wizard>
<ba-wizard-tab title="Personal info" form="vm.personalInfoForm">
<form name="vm.personalInfoForm" novalidate>
<div class="row">
<div class="col-md-6">
<div class="form-group has-feedback"
ng-class="{'has-error': vm.personalInfoForm.username.$invalid && (vm.personalInfoForm.username.$dirty || vm.personalInfoForm.$submitted)}">
<label for="exampleUsername1">Username</label>
<input type="text" class="form-control" id="exampleUsername1" name="username" placeholder="Username" ng-model="vm.personalInfo.username" required>
<span class="help-block error-block basic-block">Required</span>
</div>
<div class="form-group" ng-class="{'has-error': vm.personalInfoForm.email.$invalid && (vm.personalInfoForm.email.$dirty || vm.personalInfoForm.$submitted)}">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" name="email" placeholder="Email" ng-model="vm.personalInfo.email" required>
<span class="help-block error-block basic-block">Proper email required</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{'has-error': vm.personalInfoForm.password.$invalid && (vm.personalInfoForm.password.$dirty || vm.personalInfoForm.$submitted)}">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" name="password" placeholder="Password" ng-model="vm.personalInfo.password" required>
<span class="help-block error-block basic-block">Required</span>
</div>
<div class="form-group" ng-class="{'has-error': !vm.arePersonalInfoPasswordsEqual() && (vm.personalInfoForm.confirmPassword.$dirty || vm.personalInfoForm.$submitted)}">
<label for="exampleInputConfirmPassword1">Confirm Password</label>
<input type="password" class="form-control" id="exampleInputConfirmPassword1" name="confirmPassword" placeholder="Confirm Password" ng-model="vm.personalInfo.confirmPassword" required>
<span class="help-block error-block basic-block">Passwords should match</span>
</div>
</div>
</div>
</form>
</ba-wizard-tab>
<ba-wizard-tab title="Product Info" form="vm.productInfoForm">
<form name="vm.productInfoForm" novalidate>
<div class="row">
<div class="col-sm-6">
@ -54,9 +66,8 @@
</div>
</div>
</form>
<button type="submit" class="btn btn-primary">Submit</button>
</ba-wizard-tab>
<ba-wizard-tab title="Payment" completeness="vm.paymentForm.$valid">
<ba-wizard-tab title="Payment" form="vm.paymentForm">
<form class="row form-inline" name="vm.paymentForm" novalidate>
<div class="form-group col-sm-3 col-xs-6">
<input type="text" class="form-control" id="exampleInputName2" placeholder="Name" ng-model="vm.payment.name" required>

15
src/app/pages/form/wizard/wizrdCtrl.js
View File

@ -7,7 +7,7 @@
.directive('baWizardTab', baWizardTab);
/** @ngInject */
function WizardCtrl($scope, $location, $sce) {
function WizardCtrl($scope) {
var vm = this;
vm.personalInfo = {};
@ -15,6 +15,9 @@
vm.payment = {};
vm.finish = {};
vm.arePersonalInfoPasswordsEqual = function () {
return vm.personalInfo.confirmPassword && vm.personalInfo.password == vm.personalInfo.confirmPassword;
};
}
function baWizard() {
@ -39,6 +42,7 @@
$scope.$watch(angular.bind(vm, function () {return vm.tabNum;}), countProgress);
vm.selectTab = function (tabNum) {
vm.tabs[vm.tabNum].submit();
if (vm.tabs[tabNum].isAvailiable()) {
vm.tabNum = tabNum;
vm.tabs.forEach(function (t, tIndex) {
@ -76,7 +80,7 @@
transclude: true,
require: '^baWizard',
scope: {
completeness: '='
form: '='
},
templateUrl: 'app/pages/form/wizard/tab.html',
link: function($scope, $element, $attrs, wizard) {
@ -85,6 +89,7 @@
var tab = {
title: $attrs.title,
select: select,
submit: submit,
isComplete: isComplete,
isAvailiable: isAvailiable,
prevTab: undefined,
@ -101,8 +106,12 @@
}
}
function submit() {
$scope.form && $scope.form.$setSubmitted(true);
}
function isComplete() {
return $scope.completeness;
return $scope.form ? $scope.form.$valid : true;
}
function isAvailiable() {

7
src/sass/app/_form.scss
View File

@ -380,6 +380,13 @@ label.custom-input-danger {
color: $help-text;
}
.help-block.error-block {
display: none;
.has-error &.basic-block {
display: block;
}
}
@mixin groupAddon($color) {
background: $color;
color: #ffffff;