Home > Developer > JavaScript
Use AngularJS to implement Form Wizard, angularjs form
Today we will use AngularJs and the great UI Router and Angular ngAnimate module to create a multi-step form with animation. This technology can be used on large forms that you want to simplify user operations.
We can see that this technology has been applied on many web pages. For example, the shopping cart, registry form, entry process, and step form make it easier for users to enter forms online.
Next we will build it:
Using the UI Router, it can embed the status and display different views for each status, so that we can make multi-step forms quite easy.
Let's get down to the truth and start creating our best form!
Create a project
The creation project has a template structure. A Layout file is required, and each form's View File, format file, and JavaScript file are required.
The following is the file list. Create them first, and then fill in the content.
Each table ticket -____.html represents the html file in the hierarchical structure. These structures are finally created in our form structure.
Our layout/template file index.html
We create a main file to introduce all the resources we need to start our project. Here we use the index.html file as the main file.
Now, we load the resources we need (AngularJS, ngAnimate, Ui Router, and other scripts and style sheets) set a ui-view to tell the UI Router where the view needs to be displayed. Here we use Bootstrap to quickly apply styles.
<!-- index.html --><!DOCTYPE html>After all the files are introduced, let's go to app. js to create an Angular application and the most basic routing configuration. Note how we apply Angular App (formApp) to the body.
Create our Angular App app. jsNow let's create an application and a route. In a large application, you certainly want to distribute your Angular applications, routes, and controllers to their respective modules, but in order to complete our simple use cases, we will put them all in the app. js is a happy family.
// app.js// create our angular app and inject ngAnimate and ui-router // =============================================================================angular.module('formApp', ['ngAnimate', 'ui.router']) // configuring our routes // =============================================================================.config(function($stateProvider, $urlRouterProvider) { $stateProvider // route to show our basic form (/form) .state('form', { url: '/form', templateUrl: 'form.html', controller: 'formController' }) // nested states // each of these sections will have their own view // url will be nested (/form/profile) .state('form.profile', { url: '/profile', templateUrl: 'form-profile.html' }) // url will be /form/interests .state('form.interests', { url: '/interests', templateUrl: 'form-interests.html' }) // url will be /form/payment .state('form.payment', { url: '/payment', templateUrl: 'form-payment.html' }); // catch all route // send users to the form page $urlRouterProvider.otherwise('/form/profile');}) // our controller for the form// =============================================================================.controller('formController', function($scope) { // we will store all of our form data in this object $scope.formData = {}; // function to process the form $scope.processForm = function() { alert('awesome!'); }; });Now we have an application that has been injected with ngAnimate and ui. router. We have also created a route. Note how we define URLs, view files (templateUrl), and controllers for each view area.
Form will be our main view area. It also has a.-separated subview area form. profile. This idea can be realized when the application status changes (TRANSLATOR: it may be a route, queryString, etc.), the subview will be displayed in the main view area. (TRANSLATOR: you can update only the changes in the subview area and record the status of the subview area ).
We will demonstrate it in the next section. Now we need to create a view for the form and its subview area.
Form template view form.htmlLet's start with the new form.html. This file will be filled with a template in our remaining table View File, just as index.html is used as the overall template for the entire project. What we want to do is to include the ui-view in the file, so that the nested declaration can know where to inject their views.
<!-- form.html --><div class="row"><div class="col-sm-8 col-sm-offset-2"> <div id="form-container"> <div class="page-header text-center">Note how we use ui-view in the project for the second time. This is the greatness of the UI Router: We can nest declarations and views. This gives us a lot of flexibility when developing applications. For details about the UI Router view, see the official documentation.
Add a status-based activation class
We want each status button to be displayed when they are activated. To achieve this, we will use the UI-sref-active provided by the ui Router. If the ui-sref is consistent with the current status, the specified class will be added.
Now, you may want to know what the form looks like. Let's take a look at the browser.
So far, we haven't gotten everything as expected, but this is the beginning of a series of great things. Let's move on, add a style, and then add some embedded views and comments.
Basic stylingstyle.css
We will design our form-container and status-buttons to make our form look better.
/* style.css *//* BASIC STYLINGS============================================================================= */body { padding-top:20px; } /* form styling */#form-container { background:#2f2f2f; margin-bottom:20px; border-radius:5px; }#form-container .page-header { background:#151515; margin:0; padding:30px; border-top-left-radius:5px; border-top-right-radius:5px; } /* numbered buttons */#status-buttons { }#status-buttons a { color:#FFF; display:inline-block; font-size:12px; margin-right:10px; text-align:center; text-transform:uppercase; }#status-buttons a:hover { text-decoration:none; } /* we will style the span as the circled number */#status-buttons span { background:#080808; display:block; height:30px; margin:0 auto 10px; padding-top:5px; width:30px; border-radius:50%; } /* active buttons turn light green-blue*/#status-buttons a.active span { background:#00BC8C; }Now our buttons are better looking and better suited to what we want. Next let's look at the nested view.
Form-interests.html, form-payment.html, form-profile.htmlThis branch is relatively simple. We will define different views with the input boxes we need. And bind them to the formData object so that we can see the input data.
The following is a View File for nested views:
Form overview View
<!-- form-profile.html --><div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" name="name" ng-model="formData.name"></div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" name="email" ng-model="formData.email"></div> <div class="form-group row"><div class="col-xs-6 col-xs-offset-3"> <a ui-sref="form.interests" class="btn btn-block btn-info"> Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> </a></div></div>Form Interest View
<!-- form-interests.html --><label>What's Your Console of Choice?</label><div class="form-group"> <div class="radio"> <label> <input type="radio" ng-model="formData.type" value="xbox" checked> I like XBOX </label> </div> <div class="radio"> <label> <input type="radio" ng-model="formData.type" value="ps"> I like PS4 </label> </div></div> <div class="form-group row"><div class="col-xs-6 col-xs-offset-3"> <a ui-sref="form.payment" class="btn btn-block btn-info"> Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> </a></div></div>Form payment View
<!-- form-payment.html --><div class="text-center"> <span class="glyphicon glyphicon-heart"></span>Now that we have defined these views, they will be displayed when we browse the form. Similarly, we use the next button and ui-sref to connect each new view.
When using ui-sref, you need to connect to the state defined in your route instead of the URL. Angular will then use this to build href for you.The following is the current page of our form.
To make our pages look extraordinary, add animations.
Make our forms animatedAt the beginning of the project, ngAnimate was loaded and added to the class to be animated. When the view enters or exits, it automatically adds ng-enter and ng-leave classes.
All we do now is to form our final form through styles. This article is a good starting point to understand Angular animation.
Let's go to the css file and apply the animation to our form.
/* style.css *//* ANIMATION STYLINGS============================================================================= */#signup-form { position:relative; min-height:300px; overflow:hidden; padding:30px; }#form-views { width:auto; } /* basic styling for entering and leaving *//* left and right added to ensure full width */#form-views.ng-enter,#form-views.ng-leave { position:absolute; left:30px; right:30px; transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; } /* enter animation */#form-views.ng-enter { -webkit-animation:slideInRight 0.5s both ease; -moz-animation:slideInRight 0.5s both ease; animation:slideInRight 0.5s both ease; } /* leave animation */#form-views.ng-leave { -webkit-animation:slideOutLeft 0.5s both ease; -moz-animation:slideOutLeft 0.5s both ease; animation:slideOutLeft 0.5s both ease; } /* ANIMATIONS============================================================================= *//* slide out to the left */@keyframes slideOutLeft { to { transform: translateX(-200%); }}@-moz-keyframes slideOutLeft { to { -moz-transform: translateX(-200%); }}@-webkit-keyframes slideOutLeft { to { -webkit-transform: translateX(-200%); }} /* slide in from the right */@keyframes slideInRight { from { transform:translateX(200%); } to { transform: translateX(0); }}@-moz-keyframes slideInRight { from { -moz-transform:translateX(200%); } to { -moz-transform: translateX(0); }}@-webkit-keyframes slideInRight { from { -webkit-transform:translateX(200%); } to { -webkit-transform: translateX(0); }}First, determine the form style when the view leaves or goes in. They are absolutely positioned. Make sure that a view is not placed under another view when it enters.
Next, apply our animation to The. ng-enter and. ng-leave classes.
Third, define the animation with @ keyframes. When all these parts are combined, our form has Angular animation, the status-based UI Router and Angular data binding.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
