Angular 表单简介

Angular 中有两种表单：

• Template-driven Forms (类似于 AngularJS 1.x 中的表单 )

• Reactive Forms

Template-driven 表单的特点

• 使用方便

• 适用于简单的场景

• 通过 [(ngModel)] 实现数据双向绑定

• 自动生成 Form Model (异步)

• 最小化组件类的代码

• 不易于单元测试

Reactive 表单的特点

• 比较灵活

• 适用于复杂的场景

• 简化了HTML模板的代码，把验证逻辑抽离到组件类中

• 手动创建 Form Model (同步)

• 方便的跟踪表单控件值的变化

• 易于动态添加表单控件

• 易于单元测试

Template-driven vs Reactive 表单

Template-driven 表单

• 模板

  • Form 元素

  • Input 元素

  • 数据绑定

  • 验证规则 (属性设置，如 required)

  • 错误消息

  • 自动创建对应的表单模型 (如 FormGroup、FormControl)

• 组件类

  • 属性绑定

  • 表单操作相关的方法，如表单提交 (submit)

• 指令 (FormsModule)

  • ngForm

  • ngModel

  • ngModelGroup

Reactive 表单

• 模板

  • Form 元素

  • Input 元素

  • Form 模型绑定

• 组件类

  • Form 模型

  • 验证规则

  • 错误消息

  • 数据模型相关属性

  • 表单操作相关的方法，如表单提交 (submit)

• 指令 (ReactiveFormsModule)

  • formGroup

  • formControl

  • formControlName

  • formGroupName

  • formArrayName

表单控件的状态

• Value Changed

  • pristine - 表单控件值未改变

  • dirty - 表单控件值已改变

• Validity

  • valid - 表单控件有效

  • invalid - 表单控件无效

• Visited

  • touched - 表单控件已被访问过

  • untouched - 表单控件未被访问过

HTML Form vs Template-driven Form vs Reactive Form

HTML Form

  

    
      用户名
      
    
  
  ...
  注册

Template-driven Form

  

    
      用户名
      
    
    

      用户名是必填项
    
    

      用户名的长度必须大于3
    
  
  ...
  注册

Reactive Form

  

    
      用户名
      
    
    

            用户名是必填项
    
    

            用户名的长度必须大于3
    
  
  ...
  注册

接下来我们主要来介绍一下 Reactive Form 的一些相关基础知识。

Reactive Form 简介

使用 Reactive Form

要使用 Reactive Form 需要以下几个步骤：

• 导入 ReactiveFormsModule

import { ReactiveFormsModule } from "@angular/forms";

• 在 NgModule 的 imports 属性值对应的数组中，添加 ReactiveFormsModule

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule
  ],
})
export class AppModule { }

• 绑定 form 元素的 formGroup 属性

• 关联 input 元素对应的 FormControl 实例

使用 FormGroup

• 创建 FormGroup 属性

• 创建 FormGroup 实例

• 创建每个 FormControl 实例

signupForm: FormGroup; 

this.signupForm = new FormGroup({
  userName: new FormControl('', [Validators.required, Validators.minLength(3)]),
  email: new FormControl('', [Validators.required, Validators.email]),
  ...
});

使用 FormBuilder

要使用 FormBuilder 需要以下几个步骤：

• 导入 FormBuilder

• 注入 FormBuilder 实例

• 使用 FormBuilder 实例

FormBuilder 创建 Form Control 语法

• 方式一

this.signupForm = this.fb.group({
  userName: 'semlinker',
  hasAddress: false
});

• 方式二

this.signupForm = this.fb.group({
  userName: {value: 'semlinker', disabled: true}
  hasAddress: {value: true, disabled: false}
});

• 方式三

this.signupForm = this.fb.group({
  userName: [''],
  hasAddress: [{value: true, disabled: false}]
})

进阶资源

• Angular 4.x Template Driven Forms

  • 涉及 ngModel、[ngModel]、[(ngModel)]、ngModelGroup、Template-Driven error validation

• Angular 4.x Template-driven Forms Demo

  • 涉及 Template-driven 表单常用控件，如 text、radio、select (基本类型、对象)、multi select、cascading select (级联)、multi checkbox 等控件的使用

• Angular 4.x Reactive Forms

  • 涉及 FormControl、FormGroup、Reactive Submit、Reactive Forms error validation、FormBuilder

• Angular 4.x Custom Form Control

  • 涉及 ControlValueAccessor、自定义验证规则等

• Angular 4.x Creating Dynamic Form

  • 涉及动态创建表单的相关内容

若想进一步阅读更多表单相关的资料，请查看 Angular 4修仙目录 - 表单章节。