Angular2基础之表单使用
系统提示: 阅读此文大概需要我也不知道几分钟... 今天我们要带领大家走进一个新天地,那就是Angular2的表单;众所周知基本上所有的web系统都会涉及到关于表单的操作,在那些电商类的网站中,表单更是占据着重要的地位;而且表单的验证,友好的信息提示,表单的提交等等都是web前端开发者常常需要花费大量的时间和精力去完成的任务.但是现在,通过使用Angular2与表单相关的指令和特性我们可以很方便的解决上面的问题,Oh,耶! 当然,说得再多不如我们亲自来实践一下,毕竟实践出真知;当然搞不好如果你看了这篇文章,说不定也就喜欢上使用Angular2了呢?(我才不信呢...) 好,让我们开始这愉快的旅行;首先我们这个小的练习还是在QuickStart的基础上进行的,所以你还是要先完成这一步,才可以进行下面的练习. 首先我们写一个简单的表单模板: <div class="DEMO-form-container"> <h1>This is A Awesome Form!</h1> <form class="DEMO-form"> <div class="form-group"> <label for="username">Username</label> <input type="text" class="form-control" id="username" placeholder="Username"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" class="form-control" id="email" placeholder="Email"> </div> <div class="form-group"> <label for="motto">Password</label> <input type="text" class="form-control" id="motto" placeholder="Motto"> </div> <div class="form-group"> <label for="favorite">Favorite fruit</label> <select id="favorite" class="form-control"> <option value="apple">apple</option> <option value="banana">banana</option> <option value="pear">pear</option> <option value="orange">orange</option> </select> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> 它的路径是 @Component({ selector: 'my-app',//template: '<h1>My First Angular2 Travel</h1>' templateUrl: 'app/templates/form.html' }) 为了样式好看一点,我们直接使用 <!-- Bootstrap--> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- Form.css --> <link rel="stylesheet" href="app/style/form.css"> <!-- Style.css --> <link rel="stylesheet" href="styles.css"> 在根目录下我们运行命令 我们首先要做的第一件事情就是将表单的数据展示到表单中,在进行这一步骤之前我们需要知道在 系好安全带,老司机要开车了;在展示数据之前,我们需要一个创建一个 export class User { constructor( public username: string,public email: string,public motto: string,public favorite: string ){} } 一个很简单的类,用来创建我们的用户实例.然后我们需要在 // 使用User类 import {User} from './classes/User'; // ... export class AppComponent { user = new User('dreamapple','2451123321@qq.com','Nothing is impossible!','apple'); } 就像上面这样,我们已经初始化好一个 在这里我们要另起一行,以唤起大家对这个指令的足够重视;上面几节中我们已经掌握了一些基本的招式,那就是使用 <div class="DEMO-form-container"> <h1>This is A Awesome Form!</h1> <form class="DEMO-form"> <div class="form-group"> <label for="username">Username</label> <input [(ngModel)]="user.username" type="text" class="form-control" id="username" placeholder="Username"> </div> <div class="form-group"> <label for="email">Email</label> <input [(ngModel)]="user.email" type="email" class="form-control" id="email" placeholder="Email"> </div> <div class="form-group"> <label for="motto">Motto</label> <input [(ngModel)]="user.motto" type="text" class="form-control" id="motto" placeholder="Motto"> </div> <div class="form-group"> <label for="favorite">Favorite fruit</label> <select [(ngModel)]="user.favorite" id="favorite" class="form-control"> <option value="apple">apple</option> <option value="banana">banana</option> <option value="pear">pear</option> <option value="orange">orange</option> </select> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> 上面的代码就是我们使用 export class AppComponent { user = new User('dreamapple','apple'); get userInfo() { return JSON.stringify(this.user); } } 我们在模板中添加一些HTML片段来展示我们的 <!-- ... --> <h1>This is A Awesome Form!</h1> <p class="user-msg">UserInfo: {{userInfo}}</p> <form class="DEMO-form"> <!-- ... --> 这样我们改变表单中的数据,就可以在上面看到实时的变化,如下图所示;这就说明,使用 在前面几章节的学习中中,我们知道可以使用模板变量来对一个模板中的 既然我们已经知道可以使用 <input #username [ngModel]="user.username" (ngModel)="user.username = username.value" type="text" class="form-control" id="username" placeholder="Username"> 然而事情并不像我们预期的那样,因为 当然既然我们使用了 <input [ngModel]="user.username" (ngModelChange)="user.username = $event" type="text" class="form-control" id="username" placeholder="Username"> 我知道你想问什么;上面代码中的 在有些情况下,我们需要在数据从模板流向模型的时候做一些特殊的处理;比如合并或者限制按键频率,这个时候我们就需要使用 忽然发现一个问题,我们的下拉选择框还是静态的内容;我们可不希望是这样子的,所以我们来动手修改一下这个下拉框吧;使用的也还都是前面几章中提到的知识点: //... favoriteFruitList = ['apple','pear','banana','orange']; user = new User('dreamapple',this.favoriteFruitList[0]); //... 我们给这个组件新增加了一个 <!--<select [(ngModel)]="user.favorite"--> <!--id="favorite" class="form-control">--> <!--<option value="apple">apple</option>--> <!--<option value="banana">banana</option>--> <!--<option value="pear">pear</option>--> <!--<option value="orange">orange</option>--> <!--</select>--> <select [(ngModel)]="user.favorite" id="favorite" class="form-control"> <option *ngFor="let fruit of favoriteFruitList" [value]="fruit">{{fruit}}</option> </select> 至此,我们已经学习了不少东西了;但是最酷炫的部分还没有学习呢?我们接下来要学习的部分就是关于表单的验证,我们在设计表单的时候,常常会在用户输入错误信息的时候或者忘记输入一些信息的时候给用户一些温馨的提示;在 ngModel这个指令不仅仅跟踪表单的状态,它还会告诉我们一些关于表单控件的额外信息;那就是用户碰过这个控件了吗?这个控件的值发生了变化吗?数据变得无效了吗? ngModel还会使用一些特殊的 要想使用上面所说的那些特性,我们的表单控件需要具备两个特点:(1)存在 好了,能动手解决的,我们绝不瞎比比;我们首先让表单的 <input [(ngModel)]="user.username" name="username" required #spy type="text" class="form-control" id="username" placeholder="Username"> <p>className: {{spy.className}}</p> 忘了说了,这个 当我们刚打开页面的时候, form-control ng-untouched ng-pristine ng-valid 然后我们点击这个输入框然后点击页面空白部分,会看到 form-control ng-pristine ng-valid ng-touched 我们在修改一下这个控件的值,这时 form-control ng-valid ng-touched ng-dirty 我们完全删除这个输入框中的值, form-control ng-dirty ng-invalid ng-touched 我们可以清楚地看到,用户的操作会引起控件的 好,下面我们就要添加一些 .ng-valid[required] { border-left: 5px solid #42A948; /* green */ } .ng-invalid { border-left: 5px solid #a94442; /* red */ } 上面的样式用来添加到 上面的修改已经很好了,能够提示用户一些有用的信息了;但是用户可能无法根据一个暗红色的竖条知道他(她)哪里出错了,所以我们还需要给用户一些提示的信息才可以.我们可以再次使用模板变量来达到这个效果. <input [(ngModel)]="user.username" name="username" required #spy #username="ngModel" type="text" class="form-control" id="username" placeholder="Username"> <p [hidden]="username.pristine || username.valid" class="alert alert-danger">用户名不可以为空!</p> 我当然知道你这时候又有一些问题了;待我给你慢慢解释,首先我们使用了 但是,当我们运行的时候;却出现了错误...这是为什么呢? 因为我们一直没有引入表单需要的依赖 import {bootstrap} from '@angular/platform-browser-dynamic'; import {disableDeprecatedForms,provideForms} from '@angular/forms'; import {AppComponent} from './app.component'; //noinspection TypeScriptValidateTypes //bootstrap(AppComponent); import {AppComponent} from './app.component'; //noinspection TypeScriptValidateTypes bootstrap(AppComponent,[ disableDeprecatedForms(),provideForms() ]) .catch((err: any) => console.error(err)); 我们也顺便把老的表单API给禁用了,因为我们添加了 现在当我们把 好啦,关于表单的验证上面的讲解已经可以在大部分情况下满足我们的使用了;下面我们来给这个表单添加一些其他的功能吧;我们给组件 addUser() { this.user = new User('','',''); } 然后我们修改模板: <!--...--> <button class="btn btn-primary" (click)="addUser()" type="button" class="btn btn-default">addUser</button> <!--...--> 然后当我们点击 这是为什么,我们的逻辑应该没有错误呀?确实不是我们的错误,是 所以我们只好再次讨好 export class AppComponent { active: boolean = true; favoriteFruitList = ['apple','orange']; user = new User('dreamapple',this.favoriteFruitList[0]); get userInfo() { return JSON.stringify(this.user); } addUser() { this.active = false; this.user = new User('',''); setTimeout(() => this.active = true,0); } } 在模板中我们使用 <!--...--> <form class="DEMO-form" *ngIf="active"> <!--...--> 我们这样做的目的,就是为了每次新添加用户的时候,整个表单的状态都是全新的.当然这只是一个小小的 如果看到这里你还没有睡着的话,那么,小伙子我觉得你骨骼惊奇,很适合敲代码,来跟我们一起学做菜吧!我们说了这么多,却迟迟没有看到表单的提交?好啦,下面我们来讲解一下关于表单的提交;我们可以通过使用 submitForm() { alert(this.userInfo + '已经被提交!'); } 然后再次修改模板: <!--...--> <form class="DEMO-form" *ngIf="active" (ngSubmit)="submitForm()"> <!--...--> 这样当我们点击 一般情况下,如果用户填写的表单不合法,我们是不允许表单的提交的;那么我们应该怎么做呢?相信你已经有了答案.对就是使用模板变量,我们可以在表单和提交按钮上做一些小文章: <!--...--> <form class="DEMO-form" *ngIf="active" (ngSubmit)="submitForm()" #userForm="ngForm"> <!--...--> <button [disabled]="!userForm.form.valid" type="submit" class="btn btn-default">Submit</button> <!--...--> 就像我们上面是使用 但是,我们今天还要额外的多讲解一点知识;那就是关于组件的使用,我们把上面的表单封装成一个组件吧.我们新建一个文件 import {Component} from '@angular/core'; // 使用User类 import {User} from './classes/User'; /* * 别忘记了使用@前缀 * 这里相当于组件视图 */ @Component({ selector: 'my-form',//template: '<h1>My First Angular2 Travel</h1>' templateUrl: 'app/templates/form.html' }) /* * 导出这个组件,也就是一个类 * 这里相当于组件控制器 */ export class FormComponent { active: boolean = true; favoriteFruitList = ['apple',0); } submitForm() { alert(this.userInfo + '已经被提交!'); } } 注意 import {Component} from '@angular/core'; import {FormComponent} from './form.component'; /* * 别忘记了使用@前缀 * 这里相当于组件视图 */ @Component({ selector: 'my-app',templateUrl: 'app/templates/app.html',directives: [ FormComponent ] }) /* * 导出这个组件,也就是一个类 * 这里相当于组件控制器 */ export class AppComponent {} 我们导入了 <h1>Hello,World!</h1> <my-form></my-form> 我们添加了一个新的标签 终于结束啦,希望大家可以学的开心,然后能更好的使用 欢迎提issue,这篇文章的项目地址. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |