angular4 表单
模板表单
在app.module中导入FormsModule之后,项目中的form表单都会是一个ngForm,也就是一个模板表单。
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from "@angular/forms";
@NgModule({
imports: [
CommonModule,
FormsModule
],
exports: [],
declarations: []
})
export class AppModule { }
在表单上添加的ngForm
会拦截标准的hmlt表单提交事件。
ngModel和FormControl
- 在表单元素中添加了
ngmodel
属性,这代表着创建了一个FormControl
控件。 - 将第一步中的控件放至
form
中,Form
会自动将该FormControl
控件注册为Form
的子控件。只有表单元素上在添加了ngModel
的基础上再添加name
属性,才会将name=“nickname”
的字段添加至表单控件上。
例:
<form #myForm="ngForm">
<input ngModel name="nickname" type="text">
</form>
{{myForm.value | json}} //这里将以{{"nickname": xxx}}输出input输入框中的内容
单向数据绑定
具体使用`[ngModel]="xxx"`
双向数据绑定
具体使用`[(ngModel)]="xxx"`
ngModelGroup
简单来说,是一组 FormControl
响应式表单
响应式表单中一些常用的类
-
AbstractControl
是三个具体表单类的抽象基类。 并为它们提供了一些共同的行为和属性,其中有些是可观察对象(Observable
)。 -
FormControl
用于跟踪一个单独的表单控件的值和有效性状态。它对应于一个HTML
表单控件,比如输入框和下拉框。 -
FormGroup用于
跟踪一组AbstractControl
的实例的值和有效性状态。 该组的属性中包含了它的子控件。 组件中的顶级表单就是一个FormGroup。 -
FormArray
用于跟踪AbstractControl
实例组成的有序数组的值和有效性状态。
具体使用
在使用响应式表单之前,也需要在app.module中添加import。
import {ReactiveFormsModule} from "@angular/forms";
@NgModule({
// 省略其他
imports: [..., ReactiveFormsModule],
// 省略其他
})
// 省略其他
区别:响应式表单与模板表单最大的区别在于响应式表单并不是直接地将form
中的value
直接绑定在html中的标签上,而是只是简单地声明了一下formControlName
,再在component
上将对应的formControlName
的表单元素实例化FormControl
ngOnInit() {
// 初始化表单
this.user = new FormGroup({
email: new FormControl('', [Validators.required, Validators.pattern(/([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,4}/)]),
password: new FormControl('', [Validators.required]),
repeat: new FormControl('', [Validators.required]),
address: new FormGroup({
province: new FormControl(''),
city: new FormControl(''),
area: new FormControl(''),
addr: new FormControl('')
})
});
}
FomBuilder
FormBuilder
的存在就是为了能够快速构建表单。具体使用形式:
constructor(private fb: FormBuilder) {}
ngOnInit() {
// 初始化表单
this.user = this.fb.group({
email: ['', [Validators.required, Validators.email]],
password: ['', Validators.required],
repeat: ['', Validators.required],
address: this.fb.group({
province: [],
city: [],
area: [],
addr: []
})
});
}
表单验证
目前Angular支持的内置validate属性:
-
required
– 设置表单控件值是非空的 -
email
– 设置表单控件的格式是email -
minlength
– 设置表单控件值的最小长度 -
maxlength
– 设置表单控件长度的最大值 -
pattern
– 设置表单控件的值需匹配 pattern 对应的模式
如何判断验证的结果
通过表单控件的.valid
判断验证结果,其结果状态:
-
valid
– 有效 -
invalid
– 无效 -
pristine
– 表单值未改变 -
dirty
– 表单值已改变 -
touched
– 表单控件已被访问过 -
untouched
– 表单控件未被访问过
如果显示验证失败的信息
- 可以直接在
html
中编写验证信息,通过设置[hidden]="!formModel.hasError('验证结果')"
属性来显示。 - 在表单所在的
component
中的fomModel
上添加{validator: xxxValidat0or}
,再在指定的xxxValidator
验证方法中调用description
来显示验证失败信息。
例:{password: {description: "密码和确认密码不匹配"}}
如何添加验证信息的样式
可以通过以下类选择器添加相应的样式:
.ng-valid
.ng-invalid
.ng-pristine
.ng-dirty
.touched
.untouched