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</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
Angular基础(五) 内建指令和表单的更多相关文章
- day 69 Django基础五之django模型层(一)单表操作
Django基础五之django模型层(一)单表操作 本节目录 一 ORM简介 二 单表操作 三 章节作业 四 xxx 一 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现 ...
- day 55 Django基础五之django模型层(一)单表操作
Django基础五之django模型层(一)单表操作 本节目录 一 ORM简介 二 单表操作 三 章节作业 四 xxx 一 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它 ...
- angularcli 第五篇(输入框、表单处理)
本文参考:Angular4 表单快速入门 注:涉及input表单时要在AppComponent中引入 FormsModule模块: import{ FormsModule } from '@a ...
- 自制“低奢内”CSS3登入表单,包含JS验证,请别嫌弃哦。
要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...
- 05.Django基础五之django模型层(一)单表操作
一 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人 ...
- [转] Angular 4.0 内置指令全攻略
[From] https://segmentfault.com/a/1190000010416792 简书链接 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简 ...
- Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...
- Django基础五之django模型层(一)单表操作
一 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人 ...
- Angular JS 中的内置方法之表单验证
angular js 结合html5 可以实现强大的表单验证功能 关闭html5自带的表单验证功能可以用
随机推荐
- U-boot中SPL功能和源码流程分析
在U-boot目录下,有个比较重要的目录就是SPL的,SPL到底是什么呢?为什么要用它呢? SPL(Secondary programloader)是uboot第一阶段执行的代码.主要负责搬移uboo ...
- Java Web(三) 会话机制,Cookie和Session详解(转载)
https://www.cnblogs.com/whgk/p/6422391.html 很大一部分应该知道什么是会话机制,也能说的出几句,我也大概了解一点,但是学了之后几天不用,立马忘的一干二净,原因 ...
- 抽象语法树(AST)
AST描述 在计算机科学中,抽象语法树(AST)或语法树是用编程语言编写的源代码的抽象语法结构的树表示.树的每个节点表示在源代码中出现的构造.语法是“抽象的”,因为它不代表真实语法中出现的每个细节,而 ...
- C# 对密码等数据进行对称性加密解密
类: /// <summary> /// DESEncrypt加密解密算法. /// </summary> public class DESEncrypt { private ...
- [源码]一键获取windows系统登陆密码vc6版源码
[源码]一键获取windows系统登陆密码vc6版源码支持:XP/2000/2003/WIN7/2008等 此版本编译出来的程序体积较小几十KB... 而vs版则1点几M,体积整整大了2-30倍对某些 ...
- Ubuntu18.04 安装 VMwareTools
VMwareTools作用: 1.增强虚拟显卡和硬盘性能.以及同步虚拟机与主机时钟的驱动程序. 2.可以从物理主机直接往虚拟机里面拖文件. 3.鼠标进入虚拟机后可以直接出来,无需按CTRL+ALT才可 ...
- Linux内核源码分析之调度、内核线程模型 And Centos7.2's Kernel Resource Analysis
本文分为概述.历史.el7.2代码架构图解三部分. 解决的问题: a.Kernel调度发展过程: b.以架构图的方式,详解el7.2具体调度实现.内核线程模型.调度时间片计算,以及探究整个Kernel ...
- Spring Cloud 微服务分布式链路跟踪 Sleuth 与 Zipkin
Zipkin 是一个开放源代码分布式的跟踪系统,由 Twitter 公司开源,它致力于收集服务的定时数据,以解决微服务架构中的延迟问题,包括数据的收集.存储.查找和展现.它的理论模型来自于Google ...
- jq通过对象获取其ID值,再简单ajax传到后台改值
<tbody> <tr> <#if scopes?exists> <#list scopes as scopes> <td id='${(scop ...
- C#对象内部属性排序测试
构建对象: class SortGrid { int indexI; int indexJ; public SortGrid(int x, int y) { indexI = x; indexJ = ...