Skip to content

Commit

Permalink
Personal info form.
Browse files Browse the repository at this point in the history
  • Loading branch information
@smartapant
smartapant committed Jan 5, 2016
1 parent be1d2e0 commit 4c08699
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 26 deletions.
57 changes: 34 additions & 23 deletions src/app/pages/form/wizard/wizardPage.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
15 changes: 12 additions & 3 deletions src/app/pages/form/wizard/wizrdCtrl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,17 @@
.directive('baWizardTab', baWizardTab);

/** @ngInject */
function WizardCtrl($scope, $location, $sce) {
function WizardCtrl($scope) {
var vm = this;

vm.personalInfo = {};
vm.productInfo = {};
vm.payment = {};
vm.finish = {};

vm.arePersonalInfoPasswordsEqual = function () {
return vm.personalInfo.confirmPassword && vm.personalInfo.password == vm.personalInfo.confirmPassword;
};
}

function baWizard() {
Expand All @@ -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) {
Expand Down Expand Up @@ -76,7 +80,7 @@
transclude: true,
require: '^baWizard',
scope: {
completeness: '='
form: '='
},
templateUrl: 'app/pages/form/wizard/tab.html',
link: function($scope, $element, $attrs, wizard) {
Expand All @@ -85,6 +89,7 @@
var tab = {
title: $attrs.title,
select: select,
submit: submit,
isComplete: isComplete,
isAvailiable: isAvailiable,
prevTab: undefined,
Expand All @@ -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() {
Expand Down
7 changes: 7 additions & 0 deletions src/sass/app/_form.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 4c08699

Please sign in to comment.