表单处理

（1）Angular表单API

1、模板式表单，需引入FormsModule

2、响应式表单，需引入ReactiveFormsModule

 

（2）模板式表单

在Angular中使用form表单时，Angular会接管表单的处理，一些form表单原生的特性将不再生效

如Angular会拦截HTML标准的表单提交事件，表单提交事件将会导致页面刷新，而spa应用页面是不刷新的

模板式表单中的指令会被映射到隐式的数据模型中

1、指令NgForm => 数据模型FormGroup

form标签自动带有ngForm的特性

ngForm也可以在div上使用

 通过模板本地变量访问表单数据

绑定表单提交事件

2、指令NgModel => 数据模型FormControl

NgModel指令代表表单中的一个字段，这个指令会隐式创建一个FormControl实例代表字段的数据模型，

并使用FormControl中的属性存储字段的值

在ngForm当中使用ngModel不需要加[()]

通过模板本地变量引用指令

3、指令NgModelGroup => 数据模型FormGroup，嵌套的FormGroup

NgModelGroup代表表单中的子集，将表单中的ngModel进行分组

（3）响应式表单

1、FormControl

下图中，aaa表示初始值

2、FormGroup

3、FormArray

FormArray用于处理输入项数量不固定的表单

 响应式表单指令:ReactiveFormsModule中的指令

 响应式表单中的指令不能被模板本地变量引用

4、案例

formGroupName、formControlName、formArrayName只能用在fromGroup覆盖的范围之内，不需要加[]

 使用FormBuilder构建数据模型

AngularJs学习笔记-表单处理的更多相关文章

  1. AngularJS学习之表单

    1.HTML控件:以下HTML input元素被称为HTML控件: **input元素 **select元素 **button元素 **textarea元素 2.AngularJS表单实例: < ...

  2. php学习笔记——表单

    13.表单 1)GET vs. POST GET 和 POST 都创建数组(例如,array( key => value, key2 => value2, key3 => value ...

  3. [html5] 学习笔记-表单新增的元素与属性（续）

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  4. 9. Javascript学习笔记——表单处理

    9. 表单处理 9.1 表单的基础知识 ///表单用 <form> 元素表示,对应的是 HTMLFormElement 类型,继承自 HTMLElement. //属性:action.me ...

  5. JavaScript高级程序设计学习笔记--表单脚本

    提交表单 用户单击提交按钮或图像按钮时,就会提交表单.使用<input>和<button>都可以定义提交按钮,只要将其type特性的值设置为"submit" ...

  6. [html5] 学习笔记-表单新增元素与属性

    本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.for ...

  7. Vue.js学习笔记——表单控件实践

    最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...

  8. bootstrap学习笔记(表单)

    1.基础表单 :对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制. fieldset { min-width: 0 ...

  9. HTML5 学习笔记 表单属性

    HTML5新的表单属性 HTML5 的form和input 标签添加了几个新的属性 <form>新属性 autocomplete novalidate input 新属性 autocomp ...

随机推荐

  1. android 手写万能adapter适配器

    android开发中,我们离不开adapter,每个项目都有很多地方需要adapter,那么我们如何让自己少写adapter代码呢?那就是封装adapter,让我们的adapter成为万能的adapt ...

  2. MVVM与Controller瘦身实践

    MVC是一个做iOS开发都知道的设计模式,也是Apple官方推荐的设计模式.实际上,Cocoa Touch就是按照MVC来设计的. 这里,我们先不讲MVC是什么,我们先来谈谈软件设计的一些原则或者说理 ...

  3. Java——利用集合类实现简单斗地主发牌

    import java.util.ArrayList; import java.util.Collections; import java.util.HashMap; import java.util ...

  4. CCF201612-1 中间数(二分思想)

    问题链接:CCF201612试题. .对n个数进行排序,找出中间那个数,然后将中间那个数的左右与其相等的数去掉,看左右剩下的数个数是否相等,如果相等则中间那个数就是答案,否在输出-1. 问题描述 问题 ...

  5. Testing Round #12 B

    Description A restaurant received n orders for the rental. Each rental order reserve the restaurant ...

  6. Mysql遍历大表（Mysql大量数据读取内存溢出的解决方法）

    mysql jdbc默认把select的所有结果全部取回,放到内存中,如果是要遍历很大的表,则可能把内存撑爆. 一种办法是:用limit,offset,但这样你会发现取数据的越来越慢,原因是设置了of ...

  7. jquery——制作置顶菜单

    置顶菜单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  8. Java面向对象_继承——基本概念以及管理化妆品实例分析

    一.继承的基本概念: 1.继承是面向对象三大特征之一 2.被继承的类成为父类(超类),继承父类的类成为子类(派生类) 3.继承是指一个对象直接使用另一个对象的属性和方法 4.通过继承可以实现代码重用 ...

  9. superset 配置连接 hbase

    1. 简单说明 最近配置superset查询hbase, 根据网上查询到的文档和经验,成功了一次(python3.4  superset 0.20.),后边重试换各种版本就不行了.最后根据错误终于发现 ...

  10. 在Scala IDEA for Eclipse或IDEA里程序编译实现与在Spark Shell下的对比（其实就是那么一回事）

    不多说,直接上干货! 比如,我这里拿主成分分析(PCA). 1.主成分分析(PCA)的概念介绍 主成分分析(PCA) 是一种对数据进行旋转变换的统计学方法,其本质是在线性空间中进行一个基变换,使得变换 ...