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('',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.email]],password: ['',Validators.required],repeat: ['',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
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|