表单处理

（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. 洛谷P3527 [POI2011]MET-Meteors（整体二分）

    传送门 整体二分 先二分一个答案,判断是否可行,把可行的全都扔到左边,不可行的扔到右边 判断是否可行用树状数组就行 具体细节看代码好了 整体二分细节真多……也可能是我大脑已经退化了? //minamo ...

  2. [Xcode 实际操作]四、常用控件-(17)为MKMapView地图上显示提示框

    目录:[Swift]Xcode实际操作 本文将演示当点击地图上的标注圆点时,弹出信息窗口. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit ...

  3. VBA学习笔记

    这是一个学习VBA编程的学习笔记. 一. 介绍 二. 使用手册 2.1. 如何在Excel2010中开始使用VBA? 2.2. 如何使用VBA编辑器进行编程? 三. 语法说明 3.1 数据类型 3.2 ...

  4. jmeter - 录制app接口

    准备: 1.手机 2.wifi 3.Jmeter   步骤: 1.Jmeter->文件->Template    2.手机设置代理 端口:8888:电脑的ip,如下图设置 3.点击启动   ...

  5. 原生JS轮播-各种效果的极简实现

    寒假持续摸鱼中~此为老早以前博客的重写,当时还是分开写的,这里汇总重写,正好复习一遍~ 春招我来了! 所有有意思的,一股脑先扔进收藏,然后再也不看哈哈,真是糟糕. 今日事,今日毕,说起来容易. 当时竟 ...

  6. 基于svn+ssh:访问svn的部署以及客户端配置

    1.安装ssh sudo apt-get install ssh 2.安装subversion sudo apt-get install subversion 3.为参与项目开发的成员建立用户帐户 s ...

  7. Sharepoint 根据文件相对路径获取、操作SPFolder

    public AjaxResult LoadDocInfo(HttpContext httpContext) { var result = new ArrayList(); try { var org ...

  8. web.xml中监听器如何顺序加载

    最近用到在Tomcat服务器启动时自动加载数据到缓存,这就需要创建一个自定义的缓存监听器并实现ServletContextListener接口, 并且在此自定义监听器中需要用到Spring的依赖注入功 ...

  9. Java多线程与并发——进程与线程

    1.什么是进程 程序是指令和数据的有序集合,其本身没有任何运行的含义,是一个静态的概念.而进程是程序在处理机上的一次执行过程,它是一个动态的概念. 进程是一个具有一定独立功能的程序,一个实体,每一个进 ...

  10. /sbin/int的启动及后续进程的启动_3

    转载自: http://www.ruanyifeng.com/blog/2013/08/linux_boot_process.html 半年前,我写了<计算机是如何启动的?>,探讨BIOS ...