Angular中的表单

复杂&解决方案

原因

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

解决方案

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

表单对象

首先导入模块

// 导入
import { FormControl, FormGroup } From '@Angular/forms';

// 注意: module模块中必须在imports中加入FormsModule
// app.module.ts
@NgModule({
    ...
    imports: [
        browserModule,      // 在浏览器中运行所需模块
        FormsModule,        // 表单所需模块
        ReactiveFormsModule // 响应式表单所需模块
    ]
    ...
})

FormControl

代表了单一的输入字段,例如: <input />.其中封装了该字段的值和状态
例如:

// 创建一个FormControl
let nameControl = new FormControl('name');
nameControl.value;  // => 'name'
nameControl.errors; // => null || StringMap<string, any> of errors
nameControl.dirty;  // => true || false
nameControl.valid;  // => true || false

FormGroup

一组FormControl集合,提供一个总的接口方位group中所有formControl的值和状态;

// 定义一个FormGroup
let pserson = new FormGroup({
    FirstName: new FormControl('zhou'),
    lastName: new FormControl('zhou')
});