Angular表单

前端之家收集整理的这篇文章主要介绍了Angular表单前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

猜你在找的Angularjs相关文章