Angular2.js——表单（上）
表单创建一个有效、引人注目的数据输入体验。Angular表单协调一组数据绑定控件，跟踪变更。验证输入的有效性，并且显示错误信息。
接下来，主要内容有：
1、使用组件和模板构建Angular表单；
2、用ngModel创建数据绑定，以读取和写入输入控件的值。
构建Angular表单
我们想构建包含姓名，电话，特长三个字段的表单
1、我们可以参照快速启动那篇，创建一个名为forms的新项目，也可以使用之前的项目进行修改；
2、创建Person类；
3、创建控制此表单的组件；
4、创建具有初始表单布局的模板；
5、使用ngModel双向数据绑定语法把数据属性绑定到每个表单控件中。
创建Person类
在app文件夹下创建hero.ts文件，内容为
export class Person{
constructor(
public id:number,
public name:string,
public ownpower:string,
public power?:string //可填可不填，可选的 ？不能省略
){}
}
//创建一个类，定义它的属性
TypeScript编译器为每个public构造函数参数生成一个公共字段，在创建一个新的Person实例时，自动把参数赋给这些公共字段。
创建表单组件
在app文件夹下创建hero-form-component.ts文件：
import { Component } from '@angular/core';
import {Person} from './hero'; //引入hero.ts中的Person类
@Component({
moduleId:module.id,//属性设置了基地址，用于从相对路径加载form.html模板文件
selector: 'hero-form',//在模板中创建添加<hero-form>标签
templateUrl:'../form.html'//模板上增加form.html里面的内容
})
export class HeroFormComponent {
powers=['唱歌','跳舞','弹琴','画画'];
model=new Person(1,'小明','跳舞',this.powers[2]);//实例化
submitted=false;
onsubmit(){this.submitted=true;}
get diagnostic(){return JSON.stringify(this.model);} //这个先暂时不管
}
1、这段代码导入了Angular核心库以及我们刚刚创建的Person模型；
2、@Component装饰器的选择器将<hero-form>标签把这个表单放进父模板；
3、moduleId:module.id属性设置了基地址，用于从相对模块路径加载templateUrl；
4、templateUrl属性指向一个独立的HTML模板文件，使用外联模板；
5、位model和powers提供了演示用的假数据；
6、在最后增加diagnostic属性，她返回这个模型的JSON形式。在开发过程中用于调试。
修改app.module.ts启动文件
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';//导入表单
import { AppComponent1 } from './app.component';
import{HeroFormComponent} from './hero-form.component';//导入新增加的组件类
//导入hero-form.component.ts中的HeroFormComponent
@NgModule({
imports: [
BrowserModule,
FormsModule //表单模板
],
declarations: [
AppComponent1 ,
HeroFormComponent //类名
],
bootstrap: [AppComponent1]
})
export class AppModule { }
1、导入FormsModule和新组件HeroFormComponent；
2、把FormModule添加到ngModel装饰器的imports列表中，这样应用就能访问模板驱动表单的所有特性，包括ngModel；
3、把HeroFormComponent添加到ngModule装饰器的declarations列表中，使HeroFormComponent组件在整个模块中可见。
修改app.component.ts文件
import { Component } from '@angular/core';
@Component({
selector: 'my-app',//在index.html中创建添加<my-app>标签
//包裹<hero-form></hero-form>
template:`<hero-form></hero-form>`
//模板里面添加此标签（hero-form里面的内容）
})
export class AppComponent1{}
关于表单的组建模板构建完了。
创建初始HTML表单模板，上文提到的form.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单</title>
</head>
<body>
<div class="container">
<h1>个人信息</h1>
<form>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" id="name" required class="form-control">
</div>
<div class="form-group">
<label for="ownpower">特长</label>
<input type="text" class="form-control" id="ownpower">
</div>
<div class="form-group">
<label for="power">能力选择</label>
<select class="form-control" id="power" required>
<!--循环-->
<option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
</select>
</div>
<button type="submit" class="btn btn-success">提交</button>
</form>
</div>
</body>
</html>
我们可以使用css来美化表单，在index.html里面引入样式表文件
<!--样式表-->
<link rel="stylesheet" href="css/bootstrap.min.css">
显示的效果为
使用ngModel进行双向数据绑定[(ngModel)]语法
修改form.html文件，拿姓名做个实例
<div class="form-group">
<label for="name">姓名，显示为{{model.name}}</label>
<input type="text" id="name" required class="form-control" [(ngModel)]="model.name" name="name" #name1="ngModel">
<!--双向绑定:{{model.name}}-->
<!--使用ngModwl进行双向绑定，其绑定了model.name，所以所有有model。name的都可以同时变化-->
</div>
效果为
好了，一个简单的表单就做好了，下一篇讲控制表单，校验错误等内容。
参考：https://angular.cn/docs/ts/latest/guide/forms.html
Angular2.js——表单（上）的更多相关文章
- Angular2.js——表单（下）
这部分是接表单上部分的内容,主要内容有: 1.添加自定义的CSS来提供视觉反馈: 2.显示和隐藏有效性验证的错误信息: 3.使用ngSubmit处理表单提交: 4.禁用表单提交按钮. 添加自定义的CS ...
- 12.Vue.js 表单
这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. <div id="app"> <p>in ...
- [转]html5表单上传控件Files API
表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...
- js 表单验证控制代码大全
js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...
- node.js表单——formidable/////z
node.js表单--formidable node处理表单请求,需要用到formidable包.安装formidable包的命令如下: npm install formidable 安装pack ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- angular js 表单验证
<!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...
- JS表单验证类HTML代码实例
以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...
随机推荐
- Firefox52非HTTPS页面登录页面提示连接不安全的解决办法
背景: Firefox52版本开始,对于非HTTPS协议的登录页面,会提示链接不安全,如下图 解决办法很简单,上HTTPS协议(严重推荐,尤其是祖国这种特殊国情下,上HTTPS的协议好处多多,物超所值 ...
- 解锁redis锁的正确姿势
解锁redis锁的正确姿势 redis是php的好朋友,在php写业务过程中,有时候会使用到锁的概念,同时只能有一个人可以操作某个行为.这个时候我们就要用到锁.锁的方式有好几种,php不能在内存中用锁 ...
- Java中static的特点
前两天面试时被问到静态的特点,当时回答地不是很好,现在来总结一下 在了解某样东西的时候我们通常会从它是什么,为什么,和怎么样在三方面来衡量,对于java中的static,我们也这样讨论下,要明确以下几 ...
- Linux之uniq命令
uniq - report or omit repeated lines 省去重复的行 参数: -i 忽略大小写字符的不同 -c 对重复的行进行记数 注意:uniq命令只会对相邻的重复的行进行去 ...
- 共通css初次尝试
1.网页的主要的html <@fn.html css=["${basePath}/css/help/guideCommon.css${versionControl}"]tit ...
- PRINCE2考试一共多少道题
一.Foundation 基础级: 考试时长 1 个小时: 75 道单选题,其中 5 道随机测试题,无论对错都不计入考分:满分 70 分,获得 35 分才能通过考试,正确率 50%: 全程闭卷考试 二 ...
- 【C语言】两种方式实现冒泡排序算法
题目要求 编写一个C语言程序,实现基本的冒泡排序算法. 算法 冒泡排序,用一句话来总结: 一组数中,相邻的两个数进行比较.交换,将最大(小)数交换至尾(首)部,即完成了一次冒泡排序 要想对N个数字进行 ...
- Android注解使用之Dagger2实现项目依赖关系解耦
前言: 最近牵头发起公司app的重构工作,如何通过重构让项目的耦合降低.开发效率提高,一直是我努力的方向,今天来学习一下一个注解框架Dagger2,然后看看如何使用它来降低项目的耦合. Dagger2 ...
- HTML的语义化，你需要深入了解
有关HTML的一些基础课程,很多网站都有讲,于我而言,真正实践起来,我只要求我能够让它表现出我所想要的结果即可.然而,这种要求,对于后期的维护与测试,真的是......想起日前我们所做的这个项目,那里 ...
- 如何查看sql server端口号
通过sql server配置管理器-->sql server网络配置-->选择-->通过右侧选择TCP/IP(已启用)-->查看属性 还可以通过sql语句查看: exec sy ...