首页 / ANGULAR / 使用AngularJS实现表单向导的方法

使用AngularJS实现表单向导的方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了使用AngularJS实现表单向导的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10734字，纯文字阅读大概需要16分钟。

内容图文

今天我们将使用AngularJs和伟大的UI Router以及Angular ngAnimate module创建一个带动画的多步表单。这项技术可以用在你想要简化用户操作的大表单上。

我们看到这项技术已经应用在了许多的网页上。比如购物车，注册表单，入职流程以及许多多步表单，让用户更容易在线填写表单。

下面我们将构建它：

使用AngularJS实现表单向导的方法 - 文章图片

使用UI Router，它能内嵌状态，为每个状态显示不同的view,我们能让多步表单变得相当的容易。

让我们言归正传，开始创建我们的最棒的表单！

创建工程

创建工程有个模板结构. 需要个布局文件 , 每个表单的视图文件, 格式文件, 以及JavaScript 文件.

下面就是文件清单，先创建好它们,接着在填充内容

- index.html
- form.html
- form-profile.html
- form-interests.html
- form-payment.html
- app.js
- style.css

每个表单-____.html表示层级结构中的html文件. 这些结构最终创建我们的表单结构.

我们的布局/模板文件 index.html

我们通过建立一个主文件来引入我们所需要的所有资源以开始我们的项目，这里我们使用 index.html 文件作为主文件

现在，我们加载我们所需的资源（AngularJS, ngAnimate, Ui Router, 以及其他脚本和样式表）并且设定一个 ui-view用来告知 UI Router 我们的视图需要显示到哪里。这里我们使用 Bootstrap 来快速应用样式。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 
  <!-- CSS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/darkly/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
   
  <!-- JS -->
  <!-- load angular, nganimate, and ui-router -->
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
  <script src="app.js"></script>
   
</head>
 
<!-- apply our angular app -->
<body ng-app="formApp">
 
  <div class="container">
 
    <!-- views will be injected here -->
    <div ui-view></div>
 
  </div>
 
</body>
</html>

完成所有文件的引入后，让我们进入 app.js 开始创建Angular应用和最基本的路由配置。注意我们是如何把Angular App (formApp) 应用到 body 上面的。

创建我们的Angular App app.js

现在我们来创建应用和路由。在一个大型应用中，你肯定希望把你的Angular应用、路由、控制器分布到它们各自的模块中，但是为了完成我们的简单用例，我们将把它们都放到app.js这个欢乐的大家庭中。

// 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!');
  };
   
});

现在我们拥有了一个已经注入了ngAnimate和ui.router的应用。我们同样也建立了相应的路由。注意我们是如何为每一个视图区域定义 url，视图文件(templateUrl) 和控制器的。

form 将是我们的主视图区域。它同样有一个以 . 分割的子视图区域 form.profile。这种想法能实现在应用状态发生变化时（译者：可能是路由、queryString等），子视图将会在主视图区域中显示出来。（译者：而且可以作到仅更新子视图区域变化，记录子视图区域状态）。

我们将在下一节中进行演示。现在我们需要为form以及它的子视图区域创建视图。
表单模板视图 form.html

让我们从新建form.html开始。这个文件将会在我们剩下的表单视图文件中充当模板的作用，正如index.html被用作整个项目的总体模板一样。我们所要作的是在该文件中包含ui-view，这样可以使嵌套声明知道该在何处注入他们的视图。

<!-- form.html -->
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
 
  <div id="form-container">
 
    <div class="page-header text-center">
      <h2>Let's Be Friends</h2>
       
      <!-- the links to our nested states using relative paths -->
      <!-- add the active class if the state matches our ui-sref -->
      <div id="status-buttons" class="text-center">
        <a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a>
        <a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a>
        <a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
      </div>
    </div>
     
    <!-- use ng-submit to catch the form submission and use our Angular function -->
    <form id="signup-form" ng-submit="processForm()">
 
      <!-- our nested state views will be injected here -->
      <div id="form-views" ui-view></div>
    </form>
 
  </div>
 
  <!-- show our formData as it is being typed -->
  <pre>
    {{ formData }}
  </pre>
 
 
</div>
</div>

注意我们是如何第二次在项目中使用ui-view的。这就是UI Router伟大的地方：我们可以嵌套声明和视图。这能够在我们开发应用时提供给我们非常多的灵活性。关于UI Router视图的内容，请参见官方文档。

添加基于状态的激活类

我们希望每一个状态按钮能够在他们被激活时展示。为了达到这个效果，我们将会使用UI Router提供的ui-sref-active。如果ui-sref和当前状态一致，则会添加我们指定的类。

现在，你可能想知道我们的表单究竟看起来是什么样子。让我们打开浏览器看一眼。

使用AngularJS实现表单向导的方法 - 文章图片

目前为止，我们并没有完全按照希望的那样得到所有的内容，但是这是一系列伟大事情的开端。让我们继续前进，添加一点样式，之后会添加一些嵌入视图和注释。

基础Stylingstyle.css

我们将设计我们的form-container和status-buttons来是我们的表单看起来更好。

/* 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; }

现在我们的按钮更好看了并且更符合我们想要的了，接下来我们看下嵌套视图。
嵌套视图form-profile.html, form-interests.html, form-payment.html

这部分会比较简单。我们将定义不同的带有我们需要的输入框的视图。并且将他们绑定到formData对象以便我们能看到输入的数据。

下面是我们用于嵌套视图的视图文件：
表单概要视图

<!-- 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-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.html -->
<div class="text-center">
  <span class="glyphicon glyphicon-heart"></span>
  <h3>Thanks For Your Money!</h3>
   
  <button type="submit" class="btn btn-danger">Submit</button>
</div>

既然我们已经定义了这些视图，那么当我们浏览表单时，他们就会显示出来。同样我们用下一个按钮和ui-sref来连接每一个新视图.

当使用ui-sref时，你要连接到你路由中定义的state而不是URL。然后Angular会使用这个来为你构建href。

下面是我们表单目前的每一个页面。

使用AngularJS实现表单向导的方法 - 文章图片

为了让我们的页面不同寻常，让我们加上动画效果。

让我们的表单产生动画效果

因为在项目开始的时候，我们已经加载了ngAnimate，它已经添加到需要动画的的类上了。当视图进入或退出的时候，它将自动添加类ng-enter和ng-leave。

现在我们所有做的就是通过样式形成我们最终的表单。为了理解Angular动画，这篇文章是一个很好的起点。

让我们进去css文件，将动画，并应用到我们的表单上

/* 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); }
}

首先，确定视图离开或进去时，表单的样式，他们是绝对定位的。需要确认当视图进入的时候一个视图不会放到另一个视图的下面。

其次，应用我们的动画到.ng-enter和.ng-leave类

第三，用@keyframes定义动画。所有这些部分组合到一起，我们的表单就有了Angular动画，基于状态的UI Router和Angular数据绑定。

内容总结

以上是互联网集市为您收集整理的使用AngularJS实现表单向导的方法全部内容，希望文章能够帮你解决使用AngularJS实现表单向导的方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/357391.html

来源：【匿名】

【上一篇】使用AngularJS创建单页应用的编程指引【下一篇】使用AngularJS和PHP的Laravel实现单页评论的方法

更多 ►

【使用AngularJS实现表单向导的方法】教程文章相关的互联网学习教程文章

angular 更新表单值的两种方法： setvalue,patchvalue【代码】

使用 patchValue() 方法会比使用 setValue() 方法更好！ 1、patchValue()// angular2/packages/forms/src/model.tsexport class FormGroup extends AbstractControl {...patchValue(value: {[key: string]: any},{onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {Object.keys(value).forEach(name => {if (this.controls[name]) {this.controls[name].patchValue(value[name], {onlySelf: true, em...

AngularJS 表单

1、AngularJS表单是输入控件的集合。2、HTML控件，以下Html元素被称为HTML控件：input元素，select元素，button元素，textarea元素。3、HTML表单通常与THML控件同时存在。 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" /> <meta name="viewport"content="width=device-width,initial-scale=1" /> <!--[if lt ...

实践中学习AngularJS中的表单

表单是最常用的一种组建。在Angular.js中，其实并没有单独的为表单添加多少特殊功能。但是，利用Angular.js框架本身的特点，可以更友好的呈现表单。下面将介绍几种常用的功能在Angular中是如何巧妙实现的。1.根据输入域数据实时更新输出数据下面代吗实现了一个简易的计算表单，它能将用户输入的数据进行处理，并且实时显示在表单输出域中：<div ng-app="" ng-init="quantity=1;price=5"> 数量： <input type="number" ng-model="qu...

Angular实现动态添加删除表单输入框功能【代码】【图】

1 <div class="form-group form-group-sm" *ngFor="let i of login"> 2 <label class="col-form-label">用户名</label> 3 <input class="form-control" [(ngModel)]="i.username" value="{{i.username}}"> 4 <label class="col-form-label">密码</label> 5 <input class="form-control" [(ngModel)]="i.password" value="{{i.password}}"> 6 <button class="btn btn-link" (click)="removeInput(i)">删除</but...

Angular动态表单生成（八）【代码】【图】

动态表单生成之拖拽生成表单（下）我们的动态表单，最终要实现的效果与Form.io的在线生成表单的效果类似，可以参考它的demo地址：https://codepen.io/travist/full/xVyMjo准备工作首先，我们在过程中会需要用到一个弹出层控件，这里引用KendoUI的Dialogs，使用下面的命令安装：npm i --save @progress/kendo-angular-dialog安装完成后，会提示几个可选依赖没有安装，我们继续使用命令完成安装：npm i --save @progress/kendo-angul...

Angular2组件开发—表单输入（一）【代码】【图】

NgForm - 表单指令NgForm指令为表单元素/form建立一个控件组对象，作为控件的容器；而NgControlName指令为则为宿主input元素建立一个控件对象，并将该控件加入到NgForm指令建立的控件组中：局部变量通过使用#符号，我们创建了一个引用控件组对象（注意，不是form元素！）的局部变量f。这个变量最大的作用是：它的value属性是一个简单的JSON对象，键对应于input元素的 ng-control属性，值对应于input元素的值：声明指令依赖NgForm...

angular验证表单

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>angular表单验证</title> <style> .box{width: 500px;height:auto;border:solid 1px #ccc;box-shadow: 2px 2px 8px #999;margin:100px auto;} .box>div{box-shadow: -2px -2px 8px #999;padding: 25px;} p{color: #f00;} *{margin:0;padding:0 ;} .name{margin-top: 15px;} .name label{width: 70px;display: inline-block;} </style> </head> <body> ...

AngularJS入门基础——表单验证

<form name="form" novalidata> <label name="email">your email</label> <input type="email" name="email" ng-model="email" placeholder="Email Address"> </form> /*如下是朋友空间的内容*/ angular 高级校验特性在一些情况下,单独的表单验证并不能满足需要,可能有一些特殊的校验,比如关联两个数据等等.通常这类校验都是可复用的,也就是需要一个directive.编写的自定义校验的 directive 并不复杂,首先需要了解几个 An...

Angular2组件开发—表单输入（四）【代码】【图】

NgFormControl - 绑定已有控件对象与NgControlName指令不同，NgFormControl将已有的控件/Control对象绑定到DOM元素上。当需要对输入的值进行初始化时，可以使用NgFormControl指令。下面的代码中，使用NgFormControl指令将DOM元素绑定到组件EzComp的成员变量movie上，我们需要在构造函数中先创建这个Control对象： 1@View({2//将输入元素绑定到已经创建的控件对象上 3 template : `<input type="text" [ng-form-control]="mov...

angular 重置表单【代码】

<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link type="text/css" rel="stylesheet" href="css/angular.css"></link><script src="js/angular.min.js"></script> </head> <body ng-controller="formCtrl"><form name="test" novalidate role="form"><input type="email" name="email" ng-model="info.email" required><p class="ng-hide" ng-...

Angular基础(五) 内建指令和表单【图】

? Angular提供了一些内建的指令，可以作为属性添加给HTML元素，以动态控制其行为。一、内建指令a) *ngIf，可以根据条件来显示或隐藏HTML元素。<div *ngIf=‘a>b‘>show</div>，只有在a>b的时候才会显示这个div。b)*ngSwitchCase，可以根据不同的条件，控制对应的HTML元素的显示。<div[ngSwitch]=‘myVar‘> <div *ngSwitchCase="‘a‘">vara</div> <div *ngSwitchCase="‘b‘">varb</div> <div *ngSwitchDefault>vardefault</di...

AngularJs的表单验证【图】

能够根据用户在表单中输入的内容给出实时视觉反馈是非常重要的。在人与人沟通的语境中，表单验证给出来的反馈同获得正确输入同等重要。如果想要屏蔽浏览器对表单的默认验证行为，可以在表单元素上添加novalidate标记。<form name="form" novalidate><label name="email">Your email</label><input type="email"name="email"ng-model="email" placeholder="Email Address" /></form>下面看一下可以在input元素上使用的所有验证选项。...

angular动态表单制作【图】

源码：https://github.com/Karin001/ngx-dynamic-form动态表单使用场景有时候我们需要一个灵活的表单，这个表单可以根据用户的选择，或者服务器返回的信息进行重新配置，比如：增加或删除一组input元素、一组select元素，等等。在这样的情况下，如果一开始就在模板里写下所有的表单，利用一个ngif树状结构进行选择控制，程序会变得比较冗余。这时。程序最好是能够根据用户的选择（driven by configuration）或者服务器的响应，自...

AngularJS手动表单验证

所谓手动验证是通过AngularJS表单的属性来验证，而成为AngularJS表单必须满足两个条件： 1、给form元素加上novalidate="novalidate"； 2、给form元素加上name="theForm"，如下： <!DOCTYPE html> <html lang="en" ng-app="myApp1"> <head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/><link rel="stylesheet" href="../css/main.css"/> </head> <...