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')
});