文档章节

Angular内置指令--表单指令

前端笔记
 前端笔记
发布于 2017/05/10 10:39
字数 1599
阅读 115
收藏 0

Angular2的内置指令可分为通用指令、路由指令、表单指令

表单常用:Validators(相应式表单验证用)、AbstractControlDirective(FormControl的抽象类)、 FormControl(每个表单控件都是一个FormControl)

表单指令分别被包含在下列三个模块中:(需要知道是就是一个表单控件就是一个FormControl)

  • FormsModule (基本模板驱动表单)
  • ReactiveFormsModule (响应式表单)
  • InternalFormsSharedModule (表单控件类)

响应式表单是同步的。模板驱动表单是异步的。

使用响应式表单,我们会在代码中创建整个表单控件树。 我们可以立即更新一个值或者深入到表单中的任意节点,因为所有的控件都始终是可用的。

模板驱动表单会委托指令来创建它们的表单控件。 为了消除“检查完后又变化了”的错误,这些指令需要消耗一个以上的变更检测周期来构建整个控件树。 这意味着在从组件类中操纵任何控件之前,我们都必须先等待一个节拍。

具体有:

FormsModule(也包含InternalFormsSharedModule):

  • NgForm、NgModel、NgModelGroup

ReactiveFormsModule(也包含InternalFormsSharedModule):

  • FormControlDirective、FormControlName、FormArrayName
  • FormGroupDirective、FormGroupName

InternalFormsSharedModule:

  • DefaultValueAccessor、NumberValueAccessor、SelectControlValueAccessor、SelectMultipleControlValueAccessor、CheckboxControlValueAccessor、RadioControlValueAccessor
  • NgSelectOption、NgSelectMultipleOption
  • RequiredValidator、MinLengthValidator、MaxLengthValidator、PatternValidator
  • NgControlStatus、NgControlStatusGroup

 

NgForm指令

所有的表单指令都需要在NgForm指令内部才能正常运行

NgForm指令是表单的控制中心,负责处理表单内的页面逻辑。这个指令可以不用在模板中显示使用,因为添加了FormsModule模块后,Angular模板在编译解析时,遇到<form>标签会自动创建一个NgForm指令并且将其添加到该<form>标签上。

NgModel指令

NgModel指令是表单数据绑定的核心,用于表单控件的数据绑定,提供了控件状态跟踪及校验功能。注意使用NgModel属性绑定时,一定要给该控件添加name属性。因为NgForm指令会为表单建立一个控件对象FormControl的集合,控件的NgModel属性绑定会以控件name作为唯一标识符来注册生成一个FormControl添加到集合中。

  <input type="text" name="Name" [ngModel]="contact" />     //单向绑定
  <input type="text" name="Name" [(ngModel)]="contact" />   //双向绑定

NgModel指令可以追踪表单控件的状态还能根据其状态使用对应的CSS状态类来更新表单控件的类名,绑上就可以用。

状态             true时的CSS类名    false时的CSS类名        
控件被访问        ng-touched        ng-untouched
控件值变了        ng-dirty          ng-pristine  
控件值有效        ng-valid          ng-invalid

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

NgModelGroup指令

NgModelGroup指令可以对表单输入内容进行分组,方便我们在语义上区分不同类型的输入。下面例子就是将名字的输入表单分成一组。(需要先理解局部模版变量才好理解它的作用)

  <fieldset ngModelGroup="nameGroup" #nameGroup="ngModleGroup">
    <lable>名字:</lable>
    <input type="text" name="name" required/>
    <input...                              />
  </fieldset>

对于表单有一个重要的ngSubmit事件,可以响应表单里类型为submit的按钮操作,并负责控制表单的提交流程。注意放的位置和局部表单变量。绑定了ngSubmit事件,提交后会先执行原生onSubmit事件再执行绑定的事件。

<form>元素上的novalidate属性会阻止浏览器使用原生HTML中的表单验证器。

<form #aForm="ngForm" (ngSubmit)="doSubmit(aForm.value)" novalidate>
  ......
  ......
  <button type="submit" [disable]="!aForm.value">提交<buttom>
</form>

//doSubmit
export class .....
  doSubmit(formValue: any) {
    ...//表单数据处理之类的
  }

 

学习响应式表单指令前需要先了解几个核心表单类:

  • AbstractControl是三个具体表单类的抽象基类。 并为它们提供了一些共同的行为和属性,其中有些是可观察对象(Observable)。

  • FormControl 用于跟踪一个单独的表单控件的值和有效性状态。它对应于一个HTML表单控件,比如输入框和下拉框。

  • FormGroup用于 跟踪一组AbstractControl的实例的值和有效性状态。 该组的属性中包含了它的子控件。 组件中的顶级表单就是一个FormGroup

  • FormArray用于跟踪AbstractControl实例组成的有序数组的值和有效性状态。

FormControlDirective

FormControlDirective可以将一个已有的FormControl实例绑定到一个DOM元素。

//组件
import {FormControl} from '@angular/forms';
...

export class ... {
  goControl: FormControl = new FormControl();
  ...
}

//模板
<input type="text" [formControl]="goControl" />  //现在可以通过goControl访问该控件的状态、值什么的了
                                                 //和#goControl="ngModel"相似,但可以在组件中使用

FormGroupDirective

FormGroupDirective可以将一个已有的表单组合绑定到一个DOM元素。

//组件
import ...
import { FormControl, FormGroup } from '@angular/forms';

...
export class ... {
  public bigForm = new FormGroup ({
    name: new FormControl(),
    password: new FormControl()
  });
  ...
}

//模板
<form [formGroup]="bigForm " novalidate>
  <input type="..." ... formControlName="name"/>
  <input type="..." ... formControlName="password"/>
</form>

FormControlName指令

FormControlName指令可以将一个已有的表单控件与一个DOM元素绑定,绑定时使用该指令为表单控件指定一个别名,这一指令仅作为FormGroupDirective指令的子元素使用。就像上面一个栗子的中出现的那个FormControlName一样用就好了。

  [formGroup]
    formControlName
    formControlName

FormGroupName指令

当一个FormGroup套另一个FormGroup时用,大概是这样

[formGroup]
  formGroupName
    formControlName
    formControlName
  formGroupName
    formControlName
    formControlName

FormArrayName指令

FormArray就是数组类型的FormControl

myFormArray = new FormArray([
  new formControl('早上好'),
  new formControl('晚上好')
])


formArrayName
  [formControlName]
  [formControlName]

使用FormBuilder简化构造过程

  public signInForm: FormGroup;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.createForm();
  }

  createForm() {
    this.signInForm = this.formBuilder.group({
      userName: [ '', [
        Validators.required,
        Validators.pattern(/^[a-zA-Z]+[a-zA-Z0-9]$/),
        Validators.minLength(4),
        Validators.maxLength(14)
      ]],
      password: [ '', [
        Validators.required,
        Validators.minLength(4),
        Validators.maxLength(25)
      ]]
    });
  }

 submit(userInfo) {
    ...
 }

//template:
    <form [formGroup]="signInForm" (submit)="submit(signInForm.value)" novalidate>
      <input type="text" formControlName="userName">
      <input focused="true" type="password" formControlName="password">
      <button type="submit" [disabled]="!signInForm.valid">登陆</button>
    </form>

 

InternalFormsSharedModule:

InternalFormsSharedModule模块包含的指令可以分为四个部分:

第一个部分为表单元素访问器指令

这些访问器指令时Angular表单的内部指令,在应用中无须主动使用。

  • DefaultValueAccessor
  • NumberValueAccessor
  • SelectControlValueAccessor
  • SelectMultipleControlValueAccessor
  • CheckboxControlValueAccessor

第二个部分为选择框选项指令

为Angular内部指令,它们动态的标记选择框的<option>选项。

  • NgSelectOption
  • NgSelectMultipleOption

第三部分为表单验证指令

  • RequiredValidator (增加required约束)
  • MinLengthValidator (增加minlength约束)
  • MaxLengthValidator (增加maxlength约束)
  • PatternValidator (增加Pattern正则表达式约束)
<input type="text" MinLength=10 MaxLength=20 Pattern="[0-9]" />

第四部分为控件状态指令

Angular表单的内部指令,自动根据控件是否通过验证等状态来设置元素的CSS类

  • NgControlStatus
  • NgControlStatusGroup

© 著作权归作者所有

前端笔记
粉丝 4
博文 70
码字总数 50296
作品 0
杭州
前端工程师
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
179
0
如何优雅的使用 Angular 表单验证

随便说说,这一节可以跳过 去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模块中使用最新的 An...

why520crazy
01/15
0
0
成为优秀Angular开发者所需要学习的19

一款to-do app基本等同于前端开发的“Hello world”。虽然涵盖了创建应用程序的CRUD方面,但它通常只涉及那些框架或库也能做到的皮毛而已。 Angular看起来似乎总是在改变和更新 - 但实际上,...

京东云技术新知
07/02
31
0
开源中国的 AngularJS 优秀文章汇总

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏...

oschina
2014/08/24
5.8K
13
AngularJS 的表单验证

今天我们将来看看Angular如何帮助做表单验证. 我们将讨论更多使用angular进行有关表单操作的东西(就像我们另外的一篇文章: 提交Ajax表单:AngularJS的方式). 不过不用担心,那篇文章不一定要...

oschina
2014/06/22
68.3K
7

没有更多内容

加载失败,请刷新页面

加载更多

IDEA Maven project: 'xxx/pom.xml' already exists in VFS

Failed to create a Maven project: ‘xxx/pom.xml‘ already exists in VFS idea创建项目后,发现项目有问题,删除后重新创建,提示错误如下。 解决办法 1.通过idea打开任意一个项目 2.File...

国产大熊猫
56分钟前
7
0
Flutter之 State 生命周期

State 的生命周期,指的是在用户参与的情况下,其关联的 Widget 所经历的,从创建到显示,再到更新最后到停止,直至销毁等各个阶段 不同的阶段涉及到特定的任务处理 State 的生命周期流程如下...

過愙
今天
11
0
零基础一年拿下BAT三家offer

背景 1、本人本科一本双非垫底的那种,硕士211。本硕电子通信,完全0基础,转行一年。 2、研一上第一学期上课+外派到老师合作公司写MATLAB。去年4月开始学习Java。 起步 1、实话说,刚决定转...

gzc426
今天
6
0
并行和并发的区别

并行和并发的区别 并行(Parallel)的重点在于同一时间点多个任务同时进行; 并发(Concurrent)的重点在于同一时间段有多个任务执行,不要求某个时间点有多个任务同时进行。...

StupidZhe
今天
42
0
java内存泄漏问题

所谓内存泄露就是指一个不再被程序使用的对象或变量一直被占据在内存中。Java中有垃圾回收机制,它可以保证一对象不再被引用的时候,即对象编程了孤儿的时候,对象将自动被垃圾回收器从内存中...

Bb进阶
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部