angular表单知识点

原文

  https://www.jianshu.com/p/c772d143e1fc

大纲

  1、对表单的理解
  2、模板驱动表单(Template Driven Forms)
  3、响应式表单(Reactive Forms )
  4、响应式表单和模板驱动表单的区别和联系
  5、FormControl、FormGroup——angular基础的表单对象

对表单的理解

1、事实证明,表单最终可能是非常复杂的。原因如下:

  1.1、表单输入意味着需要在页面和服务器端同时修改这份数据;
  1.2、修改的内容通常要在页面的其他地方反映出来;
  1.3、用户的输入可能存在很多问题,所以需要验证输入的内容;
  1.4、用户界面需要清晰地显示出可能出现的预期结果和错误信息;
  1.5、字段之间的依赖可能存在复杂的业务逻辑;我们希望不依赖DOM选择器就能轻松测试表单。

2、值得庆幸的是,Angular已经给出了上述所有问题的解决方案。

  2.1、表单控件(FormControl)封装了表单中的输入,并提供了一些可供操纵的对象。
  2.2、验证器(validator)让我们能以自己喜欢的任何方式验证表单输入。
  2.3、观察者(observer)让我们能够监听表单的变化,并作出相应的回应。

模板驱动表单(Template Driven Forms)

  1、模板驱动(也叫模型驱动/Model Driven)表单是同步类型的表单。
  2、模版驱动的表单和 AngularJS 对于表单的处理类似,把一些指令(比如 ngModel )、数据值和行为约束(比如 require 、minlength 等等)绑定到模版中。总体来说,这种类型的表单通过绑定把很多工作交给了模版。
  3、进行模版驱动类型的表单处理的一个必要步骤就是建立数据的双向绑定,通过ngModel进行双向绑定

响应式表单(Reactive Forms )

  1、响应式表单(Reactive Forms )是异步类型的表单。
  2、响应式表单乍一看还是很像模板驱动型表单的,但响应式表单需要引入一个不同的模块: ReactiveFormsModule 而不是 FormsModule
  3、响应式表单区别于模板驱动型表单的的主要特点在于:是由组件类去创建、维护和跟踪表单的变化,而不是依赖模板。

响应式表单和模板驱动表单的区别和联系

  1、其实表单的创建都是表单的基础对象FormControl、FormGroup这两个基础表单对象的创建,不同点在于,模板驱动表单的创建是隐式的,即引入了FormsModule就自动在每个form对象创建了FormControl、FormGroup,只不过我们需要通过显示的命名name和牵引ngForm才可以调用对应的表单对象;而对于响应式表单,是显示的创建FormGroup和FormControl,无论是在每个form对象中添加FormGroup还是在每个表单控件添加FormControlName都是显示的创建表单对象并且获取对应表单的控制权限。
  2、[(ngModel)]并不能说是模板驱动型表单和响应式表单之间的区别,因为在响应式表单中我们也可以调用ngModel来让表单模型数据和数据模型数据关联起来(需要注意的是,使用ngModel,利用formControl创建的初始值是没有效果的会被ngModel覆盖),两个表单的本质区别在于:模板驱动表单的FormControl和FormGroup都是在模板上通过添加对应的name和ngForm来创建的,乃至其校验的方式也是在模板上添加对应的标签从而来添加校验,唯一与数据模型有管理的是通过ngModel和数据模型数据相关联。而对应的响应式表单也就是模型驱动表单的所有FormGroup和FormControl都需要在组件中创建添加控制权限,乃至校验规则也是需要在后台赋予的,和模板唯一关联的是需要通过显示的在模板中添加FormGroup和FormControlName来关联对应的表单和表单控件。
  3、响应式表单和模板驱动表单添加校验规则的方式不一样,因此它们的自定义校验指令的创建方式也是不同的,虽然最终都是要继承validator。
  4、响应式表单和模板驱动表单两者表单提交的方式是一样的
  5、不管是模板表单还是响应式表单,都存在两个模型,表单模型和数据模型,做到两个模型的格式相匹配可以让代码的可读性提高很多。
  总而言之:表单是关联数据、管理数据的工具,模板驱动表单是异步的,表单组件的创建和校验在于模板中;响应式表单是同步的,表单组件的创建和校验集中于组件之中。

FormControl、FormGroup——angular基础的表单对象

  1、FormControl和FormGroup是Angular中两个最基础的表单对象。
  2、FormControl代表单一的输入字段,它是Angular表单中的最小单元。
  3、FormControl封装了这些字段的值和状态,比如是否有效、是否脏(被修改过)或是否有错误等。
  4、大多数表单都拥有不止一个字段,因此我们需要某种方式来管理多个FormControl。假设我们要检查表单的有效性。如果要遍历这个FormControl数组并检查每一个FormControl是否有效,必然相当繁琐;而FormGroup则可以为一组FormControl提供总包接口(wrapperinterface),来解决这种问题。

原文地址:https://www.cnblogs.com/shcrk/p/9216018.html

时间: 2024-11-07 02:13:00

angular表单知识点的相关文章

angular表单的使用实例

原文 https://www.jianshu.com/p/da1fd5396798 大纲 1.模板驱动表单的创建 2.响应式表单的创建 3.模板驱动型表单的自定义指令 4.响应式表单的自定义指令 5.父组件向子组件传递表单控制 6.代码素材 模板驱动表单的创建 //1.在根模块注入依赖模块 import { FormsModule } from '@angular/forms'; //2.在模板中创建表单控件 <form> <div class="form-group"

Angular表单验证

在使用 AngularJS 进行开发的时候,表单填写是一个很常见的需求,而表单验证又是比较让人头疼的部分,本文对此做一个总结. 在 Angular 的视图中使用的 form 已经不是 HTML 中的普通 form 了,而是一个被 Angular 封装过的指令.它可以完成普通 form 无法实现的功能,比如 form 嵌套,而且自带强大的验证功能. Angular 在对表单进行校验的时候会使用 ngModelController 上的属性,如果不设置 ng-model,则 Angular 无法知道

angular表单验证实例----可用的代码

前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ng-app     启动你angular的模块 ng-controller 控制器,启动你angualr里面的逻辑代码作用在页面上 ng-options  循环你select里面的option标签,很好用的 ng-submit,表单提交执行的 novalidate  表单form配合后期检测的

简话Angular 05 Angular表单验证

一句话: 可以使用所有html5表单验证功能,同时Angular还增强了部分验证,支持动态验证 1. 上源码 1 <div ng-controller="ExampleController"> 2 <form action="" name="exampleForm"> 3 <label>姓名(required ng-minlength=1 ng-maxlength=3): </label> <

angular表单

angular的表单,点击确定进行创建,支持批量创建,表单验证有样式提醒; <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> </head> <link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.cs

Angular表单的本地校验和远程校验

AngularJS Form 进阶:远程校验和自定义输入项 表单远程校验 HTML代码: <!doctype html> <html ng-app="form-example1"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="../bootstrap/

简单的angular表单验证指令

<html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>test表单验证</title> <script type="text/javascript" src="lib/angular/angular.js"></script> <script type="text/

从浅入深剖析angular表单验证

最近手上维护的组件剩下的BUG都是表单验证,而且公司的表单验证那块代码经历的几代人,里面的逻辑开始变得不清晰,而且代码结构不是很angular. 是很有必要深入了解表单验证. <body ng-controller="MainController"> <form name="form" novalidate="novalidate"> <input name="text" type="e

angular 表单操作

一直没有使用angular的表单验证以及表单提交数据.只是用的input绑定值,另外最近的设计都是点击后显示错误,而不是自动显示错误.所以错误显示一直也没有做.而表单的非法验证可以直接解决这个问题.angular 5最近更新的跟表单验证有关.导致我想研究下angular的表单操作.把web移动端的表单验证添加上.而我的随笔基本都写我不熟悉,我熟悉的,感觉舒适的都不会写. 通过keyup事件,获取用户输入.所有标准DOM事件对象都有一个target属性,引用触发该事件的元素.event.targe