Angular基础(五) 内建指令和表单
2019独角兽企业重金招聘Python工程师标准>>>
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</div>
<div *ngSwitchCase="'b'">varb2</div>
</div>
没有匹配的条件时,显示*ngSwitchDefault。如果myVar=’b’,对应的两个div都会显示,放在* ngSwitchDefault也不会受影响。
c)ngStyle,用来控制CSS样式。
<span[ngStyle]="{color: theColor}"[style.font-size.px]="fontSize">
red text
</span>
这儿的theColor和fontSize为ts代码中的属性。frontSize必须指定单位,如[style.font-size.px]、[style.font-size.em]等。
d) Indexof ngFor
<div*ngFor="let c of cities;let num=index">
<div> {{num+1}}-{{c}}</div>
</div>
定义let num=index后,num就可记录循环次数了。
e) ngNonBindable
模型绑定使用{{}}的语法,如果需要输出{{}}这样的文本,可以使用ngNonBindable。
<divngNonBindable>{{cities[0]}}</div>
二、Form
关于在Angular程序的Form,主要用到三个对象,FormControls用于处理用户输入,Validators用于输入校验,Observers用于检测数据变化并响应输入动作。
a)FormControl和FormGroup
FormControl代表输入框的一个最小单元,然后可以用FormGroup来整合一个Form表单所有的FormControl。
创建Form的方式有两种,可以在app.module中引入FormsModule或ReactiveFormsModule,要使用Form的功能,必须引入其一。
FormsModule包含的指令为ngModel和NgForm,ReactiveFormsModule包含的指令为formControl和ngFormGroup。
b) 比如创建这样一个简单的Form
html为:
这里使用了ngForm,属于第一种方式FormControl,定义了FormGroup以及(ngSubmit)输出,并把ngForm绑定到了#f变量,所以onSubmit传递的参数为f.Value,就是当前的FormGroup,点击提交,拿到的对象为:Object { sku: "xxx" }。
<input type="text"
id="skuInput"
placeholder="SKU"
name="sku" ngModel>
ngModel是NgModel的选择器,可以使用ngModel=”XXX”的形式指定属性值,但这里没有指定值,则采用的是单向绑定的方式,而且通过在input放置ngModel,也创建了一个FormControl,当前只有一个输入单元name=”sku”。这个FormControl会自动被添加到父元素也就是<form>上。
c) 如果要为已经存在的FormGroup或FormControls绑定Form单元,可以使用ReactiveFormsModule的FormBuilder。
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'sku': ['ABC123']
});
}
这段代码使用了FormBuilder,然后在html模板使用[formGroup]。
学习资料:The Complete Book on Angular by Nate Murray, Felipe Coury, AriLerner , Carlos Taborda
转载于:https://my.oschina.net/u/2327858/blog/1518304
Angular基础(五) 内建指令和表单相关推荐
- 自制“低奢内”CSS3登入表单,包含JS验证,请别嫌弃哦。
要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...
- 【云速建站】表单应用
[摘要] 云速建站的留言插件是网站唯一一个表单类插件,留言插件的字段类型有下拉框,单复选,文本框,图片上传,三级联动,日期等,通过这些不同类型字段的组合,可以实现多样化的表单功能.本篇重点介绍留言插件 ...
- 精通CSS.DIV网页样式与布局(五) ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式 表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
- python代码函数字符查询宝典书籍_Django基础五之django模型层(一)单表操作
二 单表操作 一.创建表 创建模型 创建名为book的app,在book下的models.py中创建模型: from django.db importmodels#Create your models ...
- Angular JS 中的内置方法之表单验证
angular js 结合html5 可以实现强大的表单验证功能 关闭html5自带的表单验证功能可以用 转载于:https://www.cnblogs.com/Pikzas/p/9005861.ht ...
- HTML 基础【2】 -- 表格标签 / 表单标签
请先学习往期内容:HTML 基础[1] – 入门介绍 / 基本结构 / 块级标签 / 行内标签 作业分析 上一篇<HTML 基础[1] – 入门介绍 / 基本结构 / 块级标签 / 行内标签&g ...
- Angular Reactive Forms -- Model-Driven Forms响应式表单
Angular 4.x 中有两种表单: Template-Driven Forms - 模板驱动式表单 (类似于 AngularJS 1.x 中的表单 ) 官方文档:https://v2.angul ...
- 小白读《锋利的jQuery(第2版)》第五章学习笔记(表单、表格)
表单应用 表单3个组成部分 表单标签 表单域 表单按钮 单行文本框应用 获取和失去焦点改变样式. 示例: HTML <form action="#" method=" ...
- JavaScript基础知识总结 17:JavaScript表单脚本
目录 一.表单基础 二.提交表单 三.表单字段的公共属性.方法.事件 1.表单字段的公共属性 2.表单字段的公共方法 3.表单字段的公共事件 四.输入过滤,屏蔽字符 五.剪切板事件 六.自动切换 七. ...
最新文章
- 在MySQL查询山东省男生信息_mysql查询语句
- java基础系列:集合入门
- matlab氢原子杂化轨道,网络版原子和分子结构可视化程序的开发
- c++string类寻找子串
- 车辆维修管理系统mysql_数据库课设计 汽车修理管理系统.doc
- C#版 微信无痕僵尸粉检测工具源码
- 酒店客房卫生打扫步骤及重点
- 如何将立创元器件封装库导入AD使用
- 国家多部委发布13份“十四五”规划,115项重大工程​
- C#多线程之解决多线程编程中大并发数等待唤醒的问题
- BOF和EOF的区别
- 防止U盘中毒的一个小技巧
- 量子计算机 量子不确定性_量子计算机将打破互联网,但前提是我们让它们
- 阿里巴巴开源的 Java 诊断工具Arthas【入门篇】
- python+django线上教学平台vue教育系统
- 基于3个操作系统的靶场,从零开始做安全渗透工程师
- 【SHELL】快乐linux命令行之基本命令
- SWO引脚配置覆盖, 导致ITM信息打印失效
- Dev C++详细安装教程及软件下载
- nginx的rewrite规则