angular4 Form表单相关
ng4中,有两种方式去声明一个表单
一:Template-Driven Forms - 模板驱动式表单 [引入FormsModule]
1.ngForm赋值 [可以方便的获取表单的值]
<form #f='ngForm' novalidate (ngSumbit)='onSubmit(f)'>
<input type='text'
name='username'
[(ngModel)]='login.username'
required>
<div *ngIf='f.controls.username?.required' class='error'>
Name is required.
</div>
</form>
2.ngModel绑定 [ngModel会自动关联表单控件name属性,并使用该值作为ngForm对象的属性名]
以下有三种写法:
<input type='text' name='username' ngModel>
<input type='text' name='username' [ngModel]='login.username'>
<input type='text' name='username' [(ngModel)]='login.username'>
3.ngModel赋值 [可以操纵表单控件的事件]
<form #f='ngForm' novalidate (ngSumbit)='onSubmit(f)'>
<input type='text'
name='username'
[(ngModel)]='login.username'
#username='ngModel'
(change)='changeName(username.value)'
required>
<div *ngIf='username.error?.required && username.touched' class='error'>
Name is required.
</div>
</form>
4.验证规则相关 [required/minlength/maxlength等]
<form #f='ngForm' novalidate (ngSumbit)='onSubmit(f)'>
<input type='text'
name='username'
[(ngModel)]='login.username'
#username='ngModel'
minlength='8'>
<div *ngIf='username.error?.minlength && username.touched' class='error'>
The minlength is 8.
</div>
</form>
5.验证状态相关 [touched/valid/invalid/pristine/dirty/untouched等]
valid:控件有效
invalid:控件无效
pristine:控件值未改变
dirty:控件值已改变
untouched:表单控件未被访问过
<form novalidate #f='ngForm'>
...
<button type='submit'
[disabled]='f.invalid'
(click)='onSubmit(f)'>
submit
</button>
</form>
二:Reactive Forms (Model-Driven Forms) - 响应式表单 [引入ReactiveFormsModule]
1.FormGroup(FormControl+FormArray)[表单对象]
FormGroup:包含一组FormControl和FormArray的实例,可用于跟踪一组实例的值和验证状态
FormControl & FormArray:为单个表单控件提供支持的类,用于跟踪控件的值和验证状态 前者是单值类型,后者是多值类型
<form novalidate [formGroup]='thatForm'>
<input type='text' formControlName='name'>
</form>
2.Validators [表单验证]
//html方面
<form novalidate [formGroup]='thatForm'>
<input type='text' formControlName='name'>
<div class='error'
*ngIf="thatForm.get('name').hasError('required') &&
thatForm.get('name').touched">
Name is required
</div>
<div class='error'
*ngIf="thatForm.get('name').hasError('minlength') &&
thatForm.get('name').touched">
The minlength is 2.
</div>
</form>
//xx.component.ts export class xxComponent implements OnInit{
thatForm: FormGroup;
constructor(){};
ngOnInit() {
this.thatForm=new FormGroup({
name:new FormGroup('',[Validators.required,Validators.minLength(2)])
})
}
}
3.FormBuilder [简化新建FormGroup对象整个过程]
//FormGroup用法 export class xxComponent implements OnInit{
thatForm: FormGroup;
constructor(){};
ngOnInit() {
this.thatForm=new FormGroup({
name:new FormGroup('',[Validators.required,Validators.minLength(2)])
})
}
}
//FormBuilder用法 export class xxComponent implements OnInit{
thatForm: FormGroup;
constructor(private formBuilder: FormBuilder){};
ngOnInit() {
this.thatForm=this.formBuilder.group({
name:['',[Validator.required,Validators.minLength(2)]]
})
}
}
4.FormValidation [统一管理验证错误]
//html方面
<form novalidate [formGroup]='thatForm'>
<input type='text' formControlName='name'>
<div class='error'>
{{formValidation.msgs.name.errors}}
</div>
</form>
//form-validation.ts export class xxValidation extends FormValidation{
constructor(){
super()
}
msgs={
name:{
errors:'',
messages:{
required:'please type the name.',
minlength:'please enter 3 charactors atleast.'
}
}
}
}
//xx.component.ts export class xxComponent implements OnInit{
formValidation:xxValidation=new xxValidation();
thatForm:FormGroup; constructor(private formBuilder: FormBuilder){}
ngOnInit(){
this.thatForm=this.formBuilder.group({
name:['',[Validators.required,Validators.minLength(4)]]
})
} }
两种方式的比较:
模板驱动表单(Template-Driven Forms)
1.使用方便
2.适用于简单的场景
3.通过[(ngModel)]实现数据双向绑定
4.最小化组件类的代码
5.不利于单元测试
响应式表单(Reactive Forms)
1.比较灵活
2.适用于复杂的场景
3.简化了HTML模板的代码,把验证逻辑抽离出来了
4.方便跟踪表单控件值的变化
5.易于单元测试
angular4 Form表单相关的更多相关文章
- form表单相关
<input> 元素 <input> 元素是最重要的表单元素. <input> 元素有很多形态,根据不同的 type 属性. 这是本章中使用的类型: 类型 描述 t ...
- angular4 form表单验证
<!-- novalidate 清除浏览器默认的校验行为 --> <form [formGroup]="formModel" (ngSubmit)="o ...
- JS之Form表单相关操作
获取ID组件的值 var userid=document.getElementById('userid').value;var cdkey=document.getElementById('cdkey ...
- Form 表单相关小技巧
JS ---textarea 高度自适应 var realH = this.scrollHeight + 10+ "px"; $(this).css("height&qu ...
- 按下回车默认提交form表单问题
最近开发中碰到一个问题,项目中有几个列表展示页面,允许用户通过查询条件模糊查询数据.用户录入关键字后点击回车会调用查询方法根据关键字查询,原先功能没有问题,但是最近发现在查询输入框中按下回车会直接刷新 ...
- 霸气側漏的HTML5--之--强大的form表单
今天学习了一下html5,发现他真的太强大了,暂不说新增的画布,通信,本地存储等的炸天功能,就连表单也是异常的好用.忍不住发一篇博客和大家分享一下.原谅我标题党了.以后的html5的学习记录博文就以& ...
- 表单相关标签之form标签
表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含 menus.textarea.fieldset.legend 和 label 元素以及其它块级元素 表单用 ...
- Angular4——7.表单处理
在Angular中存在两种表单处理方式: 模版驱动式表单 表单的数据模型是通过组件模版中的相关指令来定义的.由于使用这种方式定义表单的数据模型时,我们会受限于HTML的语法,所以,模版驱动方式只适用于 ...
- 细说 Form (表单)
细说 Form (表单) Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.net WebForms框架为了帮助 ...
随机推荐
- ArrayBlockingQueue 和LinkedBlockQueue
ArrayBlockingQueue ArrayBlockingQueue是Java多线程常用的线程安全的一个集合,基于数组实现,继承自AbstractQueue,实现了BlockingQueue和S ...
- 2016.10.5初中部上午NOIP普及组比赛总结
2016.10.5初中部上午NOIP普及组比赛总结 这次的题目出得挺有质量的.但我觉得我更应该努力了. 进度: 比赛:0+20+0+0=20 改题:AC+AC+AC+AC=AK kk的作业 这题我错得 ...
- js实现获取两个日期之间所有日期的方法
function getDate(datestr){ var temp = datestr.split("-"); var date = new Date(temp[0],temp ...
- jeecms v9 vue-CLI开发环境配置
vue-CLI开发环境配置 Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静 ...
- 使用Ajax在HTML页面中局部刷新页面(左边菜单右边页面)
转载自:https://blog.csdn.net/Cenmen_17714/article/details/80969008 index.html <a href="javascri ...
- Cesium官方教程7--三维模型
原文地址:https://cesiumjs.org/tutorials/3D-Models-Tutorial/ 三维模型 (3D Models) 这篇教程给大家介绍,如何在Cesium中通过Primi ...
- matlab调用keras深度学习模型(环境搭建)
matlab没有直接调用tensorflow模型的接口,但是有调用keras模型的接口,而keras又是tensorflow的高级封装版本,所以就研究一下这个……可以将model-based方法和le ...
- 上传本地项目到码云(gitee)
1.码云上创建一个项目比如zhirong 2.本地创建一个文件夹F:\workspace\zhirong-items,进入zhirong-items打开git bash 3.执行git init ,这 ...
- HDU--2126 Buy the souvenirs(二维01背包)
题目http://acm.hdu.edu.cn/showproblem.php?pid=2126 分析:有两个要求,一是计算最多可以选多少中纪念品:而是计算选最多纪念品的方案有多少种, 即统计最优方案 ...
- Neo4j删除节点和关系、彻底删除节点标签名
https://www.jianshu.com/p/59bd829de0de 总结提前: [1]先删关系,再删节点 [2]当记不得关系名时,type(r)可以查到关系名 [3]彻底删除节点标签名,需要 ...