表单处理

（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. 使用combobox下拉列表框实现省 市 县 的三级联动

    package com.hanqi.entity; //地区 public class Region { //地区id private String regionID; //地区名称 private ...

  2. CDN-内容发布网络

    整理<CDN技术详解>一书中重要的内容. 互联网与万维网 广义的互联网,由两层组成:一层是以TCP/IP为代表的网络层:另一层是以万维网WWW为代表的应用层.辨识互联网和万维网的区别,是认 ...

  3. POJ1023 The Fun Number System

    题目来源:http://poj.org/problem?id=1023 题目大意: 有一种有趣的数字系统.类似于我们熟知的二进制,区别是每一位的权重有正有负.(低位至高位编号0->k,第i位的权 ...

  4. 10g duplicate and 11g dupliacte db for standby

    ###################10g Creating a Physical Standby Database OASSTBY Make sure database is in archive ...

  5. man时括号里的数字是啥意思

    https://www.cnblogs.com/istarstar/p/7851233.html 具体含义可以man man来查看(自己查自己). MANUAL SECTIONS The standa ...

  6. Spark Mllib里如何采用保序回归做回归分析（图文详解）

    不多说,直接上干货! 相比于决策树,保序回归的应用范围没有决策树算法那么广泛. 特别在数据处理较为庞大的时候,采用保序回归做回归分析,可以极大地节省资源,从而提高计算效率. 保序回归的思想,是对数据进 ...

  7. 有限状态机在单片机和 Arduino 编程中的应用

    有限状态机在单片机和 Arduino 编程中的应用,个人认为在实际中这是一种思想,意味着解决一类问题. 本帖最后由 张飞 于 2015-3-4 20:18 编辑 在单片机编程中,如果在不使用操作系统的 ...

  8. SpringBoot | 第九章：Mybatis-plus的集成和使用

    前言 本章节开始介绍数据访问方面的相关知识点.对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的.目前,绝大部分公司都选择MyBatis框架作为底层数据库持久化框 ...

  9. 《大话设计模式》num02---策略模式

    2018年01月22日 22:04:57 独行侠的守望 阅读数:72更多个人分类: 设计模式编辑版权声明:本文为博主原创文章,转载请注明文章链接. https://blog.csdn.net/xiao ...

  10. springBoot学习 错误记录

    1.下面结果 会出现500错误 原因:thymeleaf相关包版本不兼容导致 解决:之前配置的3.0.9对应2.1.1&2.2.2,3.0.6对应2.2.2&2.1.1都不可以,下面的 ...