表单创建一个有效、引人注目的数据输入体验。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——表单(上)的更多相关文章

  1. Angular2.js——表单(下)

    这部分是接表单上部分的内容,主要内容有: 1.添加自定义的CSS来提供视觉反馈: 2.显示和隐藏有效性验证的错误信息: 3.使用ngSubmit处理表单提交: 4.禁用表单提交按钮. 添加自定义的CS ...

  2. 12.Vue.js 表单

    这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. <div id="app"> <p>in ...

  3. [转]html5表单上传控件Files API

    表单上传控件:<input type="file" />(IE9及以下不支持下面这些功能,其它浏览器最新版本均已支持.) 1.允许上传文件数量 允许选择多个文件:< ...

  4. js 表单验证控制代码大全

    js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...

  5. node.js表单——formidable/////z

    node.js表单--formidable   node处理表单请求,需要用到formidable包.安装formidable包的命令如下: npm install formidable 安装pack ...

  6. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  7. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  8. angular js 表单验证

    <!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...

  9. JS表单验证类HTML代码实例

    以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...

随机推荐

  1. PHP无锁内存nosql---Yac的实战

    无锁内存nosql---Yac的实战 最近在工作使用了yac,所以比较了下Memcache和Yac的高并发读写性能测试,发现Yac要比Memcache快很多(这里没有比较Yac和Apc的性能情况, 不 ...

  2. Postman使用教程——调试网络接口的凶器

    postman是谷歌浏览器的一个插件,干什么用的呢?跟题目一样,就是用来调试网络接口的.在我们程序猿做程序的时候,如果做网络应用的开发,比如一些B/S.C/S,我们总会给别人一些网络接口,也会使用别人 ...

  3. 关于如何介绍spring框架。

    一.介绍Spring 1.Spring是一个分层的JavaSE/EEfull-stack(一站式) 轻量级开源框架. 2.概念:轻量级的IOC(控制反转或者依赖注入).AOP(面向切面或者面向方面) ...

  4. 实现在easyui中的datagrid,点击某一列的列头弹出combobox下拉框

    easyUI  datagrid在列头加下拉框,实现对列内容的筛选. 代码: onLoadSuccess: function (data) {//Fires when data is loaded s ...

  5. 小梦windows phone 8.1开发:语音朗读

    使用SpeechSynthesizer类可以实现文本朗读功能,位于 Windows.Media.SpeechSynthesis命名空间.有了它我们就可以实现有声小说了,是不是很爽.下面给出一个将文本块 ...

  6. 【iOS】7.4 定位服务->2.1.3.3 定位 - 官方框架CoreLocation 功能3:区域监听

    本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...

  7. Python快速入门(1)

    FROM:实验楼 http://python.usyiyi.cn/python_278/tutorial/index.html http://woodpecker.org.cn/abyteofpyth ...

  8. 自己开发图表插件,脱离echart

    前言 由于公司业务需要做一些图标来展示一些数据,之前都是用百度的echart.js.这次放弃使用它转而自己开发是有几个原因1.echart文件太大,有些功能用不到2.echart样式不易扩展3.需求简 ...

  9. SQL Server 备份所有数据库代码

    今天让我备份一下网上所有数据库,猛地一看,几百个呢, 坑爹呢,只好网上找找有没有简便的,没想到还真有 记下来,以后好用,哈哈... use master declare @DbName varchar ...

  10. 安全性测试之防范 DDoS 攻击

    安全性测试之防范 DDoS 攻击   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:90882 ...