7.1表单处理

现在web应用表单应该满足的用户需求：

  • 自定义校验规则

  • 友好的提示信息

  • 彼此依赖的字段应该一起校验

  • 可以控制提交值

  • 可以提交方式（http方式，ajax异步请求，websocket消息）

纯HTML表单

纯HTML表单支持：

  • 显示表单项

  • 检验用户输入

  • 提交表单数据

实战：定义一个注册表单，post方式提交到“/register”，表单字段要求如下：

​ 账号：不能为空，只能是大小写字母

​ 电话：11位数字

​ 注册：提交按钮

<form action="/register" method="post">
  <div>账号：<input type="text" required pattern="[a-zA-Z]+" maxlength="6"></div>
  <div>电话：<input type="text" pattern="[0-9]+" minlength="11" maxlength="11"></div>
  <div><input type="submit" value="注册"></div>
</form>

angular表单

angular表单相关概念

  • angular具有两种表单：模板式表单和响应式表单

    模板式表单：通过模板相关指令定义，应用于简单场景。

    响应式表单：先通过TypeScript代码定义底层数据模型，再使用特定指令将HTML元素和这个底层模型连接起来。应用于复杂场景。

  • angular表单由数据模型来存储表单的数据。

    在模板式表单中，数据模型由angular基于组件模板的指令隐式创建

    在响应式表单中，数据模型由编码创建

  • 数据模型由angular/forms模块中的一些特定的类组成，如FormControl、FormGroup、FormArray等组成。在模板式表单中不能直接访问到这些类

  • 响应式表单不会替你生成HTML，模板需要自己编写。

  • 使用模板式表单需要引入HttpModule；使用响应式表单需要引入ReactiveFormsModule

模板式表单

ngForm

代表整个form表单。

  • ngForm会创建FromGroup实例

  • ngForm可以使用在div上

  • ngForm会拦截html表单的提交事件，阻止表单的自动提交并用ngSubmit事件来提交事件

  • angular会自动的在form标签上挂一个ngForm指令。如果想禁用ngForm接管表单，需要在form标签中指定ngNoForm属性

  • ngForm将接管form表单的行为导致原表单的提交行为失效

  • ngForm会自动扫描所有带有ngModel属性的字段

ngModel

标记html元素为表单元素的一部分。一个ngModel代表一个表单字段，

  • ngModel会隐式创建一个FromControl实例来代表字段数据模型并存储字段值

  • 在ngForm下使用ngModel不需要使用中括号“[ ]”或小括号“( )”，不过需要为所在标签指定name属性。这个name属性指定了标签值的key

ngModelGroup

表单的一部分，可以使表单划分出层级关系。

  • ngModelGroup会创建FormGroup实例

    ngModelGroup="passwordGroup"指定组名

使用模板本地变量绑定ngForm、ngModel、ngModelGroup后，使用模板本地变量.value可以获取到表单的值

实战

创建一个注册模板式表单，打印出表单的输入值，当点击提交按钮使，在控制台打印出表单的值

  • 模板代码

    ```html

    账号：电话：邮箱：密码：确认密码

表单值：{{regForm.value | json}}

账号：{{userName.value | json}}

电话：{{telphone.value | json}}

邮箱：{{email.value | json}}

密码：{{password.value | json}}

确认密码：{{password1.value | json}}

密码组：{{passwordGroup.value| json}}

- 控制器代码
```typeScript
  formSubmit(event: any) {
    console.log(event);
  }

响应式表单

编码创建数据模型

FormControl

构成表单的基本单元。

通常用来表示一个input元素，也可以表示更复杂的元素，如日历，下拉选择框

保存者元素当前的值、校验状态和元素是否修改过等。

FormControl的构造函数参数为指定初始值

FormGroup

FormControl的集合

formModel:FormGroup=new FormGroup({
    from:new FormGroup,
    to:new FormGroup
})

FormArray

FormControl的集合

emails:FormArray=new FormArray({
    new FormControl(),
    new FromControl()
})

响应式表单需要用到的指令

响应式表单使用与模板式表单完全不同的指令。这些指令全部来自于ReactiveFormsModule模块中。

类名

指令（使用属性绑定）

指令（使用属性名）

FormGroup

formGroup

formGroupName

FormControl

fromControl

formControlName

FormArray

无法使用属性绑定

formArrayName

响应式表单的指令不可被引用，不能被模板本地变量引用。做到了控制器和模板的隔离

使用响应式表单时，我们需要考虑的只有formGroup和3Name

类型为formGroup的变量是控制器的属性，故用属性绑定语法。

3Name为formGroup下的字符串，不使用属性绑定

  • formGroup

    使用一个绑定form标签的fromGroup代表整个表单

formGroupName 绑定formGroup下的formGroup formGroupName="dateRange"

formControlName="from" 绑定formGroup下的formControl 必须用在formGroup的范围之内

formArray 绑定formGroup下的formArray *ngFor="let e of this.formModel.get('emails').controls; let i=index;" formControlName="i"

addEmail(){ ​ let emails=this.formModel.get('emails') as FormArray; ​ emails.push(new FormArray()); }

formControl不能用在formGroup的内部 [fromControl]=""

formbuilder

formBuilder简化了响应式表单中模型定义语法

注入fb：FormBuilder

  • “ fb.array ” 代替 “new FormGroup”

  • “ fb.array ” 代替 “new FormArray”

  • “ fb.control ” 代替 “new FormControler”

  • “ [' '] ”替代formGroup下的“new FormControler”

fb.array可以传入额外的参数检验formGroup

[' ']参数：['初始值'，检验方式，'异步校验方法]

Previous6.5生命钩子Next7.2响应式表单校验

Last updated

Was this helpful?