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基础(五) 内建指令和表单的更多相关文章

  1. day 69 Django基础五之django模型层(一)单表操作

    Django基础五之django模型层(一)单表操作   本节目录 一 ORM简介 二 单表操作 三 章节作业 四 xxx 一 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现 ...

  2. day 55 Django基础五之django模型层(一)单表操作

      Django基础五之django模型层(一)单表操作   本节目录 一 ORM简介 二 单表操作 三 章节作业 四 xxx 一 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它 ...

  3. angularcli 第五篇(输入框、表单处理)

    本文参考:Angular4 表单快速入门 注:涉及input表单时要在AppComponent中引入 FormsModule模块:     import{ FormsModule } from '@a ...

  4. 自制“低奢内”CSS3登入表单,包含JS验证,请别嫌弃哦。

    要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识.和JS/JQuery基本语法. 开发环境 Adobe Dreamweaver CS6 演示地址 演示地址 预览截图(抬抬你的鼠标就可以看到 ...

  5. 05.Django基础五之django模型层(一)单表操作

    一 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人 ...

  6. [转] Angular 4.0 内置指令全攻略

    [From] https://segmentfault.com/a/1190000010416792 简书链接 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简 ...

  7. Angular中的内置指令和自定义指令

    NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...

  8. Django基础五之django模型层(一)单表操作

    一 ORM简介 MVC或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这极大的减轻了开发人 ...

  9. Angular JS 中的内置方法之表单验证

    angular js 结合html5 可以实现强大的表单验证功能 关闭html5自带的表单验证功能可以用

随机推荐

  1. U-boot中SPL功能和源码流程分析

    在U-boot目录下,有个比较重要的目录就是SPL的,SPL到底是什么呢?为什么要用它呢? SPL(Secondary programloader)是uboot第一阶段执行的代码.主要负责搬移uboo ...

  2. Java Web(三) 会话机制,Cookie和Session详解(转载)

    https://www.cnblogs.com/whgk/p/6422391.html 很大一部分应该知道什么是会话机制,也能说的出几句,我也大概了解一点,但是学了之后几天不用,立马忘的一干二净,原因 ...

  3. 抽象语法树(AST)

    AST描述 在计算机科学中,抽象语法树(AST)或语法树是用编程语言编写的源代码的抽象语法结构的树表示.树的每个节点表示在源代码中出现的构造.语法是“抽象的”,因为它不代表真实语法中出现的每个细节,而 ...

  4. C# 对密码等数据进行对称性加密解密

    类: /// <summary> /// DESEncrypt加密解密算法. /// </summary> public class DESEncrypt { private ...

  5. [源码]一键获取windows系统登陆密码vc6版源码

    [源码]一键获取windows系统登陆密码vc6版源码支持:XP/2000/2003/WIN7/2008等 此版本编译出来的程序体积较小几十KB... 而vs版则1点几M,体积整整大了2-30倍对某些 ...

  6. Ubuntu18.04 安装 VMwareTools

    VMwareTools作用: 1.增强虚拟显卡和硬盘性能.以及同步虚拟机与主机时钟的驱动程序. 2.可以从物理主机直接往虚拟机里面拖文件. 3.鼠标进入虚拟机后可以直接出来,无需按CTRL+ALT才可 ...

  7. Linux内核源码分析之调度、内核线程模型 And Centos7.2's Kernel Resource Analysis

    本文分为概述.历史.el7.2代码架构图解三部分. 解决的问题: a.Kernel调度发展过程: b.以架构图的方式,详解el7.2具体调度实现.内核线程模型.调度时间片计算,以及探究整个Kernel ...

  8. Spring Cloud 微服务分布式链路跟踪 Sleuth 与 Zipkin

    Zipkin 是一个开放源代码分布式的跟踪系统,由 Twitter 公司开源,它致力于收集服务的定时数据,以解决微服务架构中的延迟问题,包括数据的收集.存储.查找和展现.它的理论模型来自于Google ...

  9. jq通过对象获取其ID值,再简单ajax传到后台改值

    <tbody> <tr> <#if scopes?exists> <#list scopes as scopes> <td id='${(scop ...

  10. C#对象内部属性排序测试

    构建对象: class SortGrid { int indexI; int indexJ; public SortGrid(int x, int y) { indexI = x; indexJ = ...