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表单相关的更多相关文章

  1. form表单相关

    <input> 元素 <input> 元素是最重要的表单元素. <input> 元素有很多形态,根据不同的 type 属性. 这是本章中使用的类型: 类型 描述 t ...

  2. angular4 form表单验证

    <!-- novalidate 清除浏览器默认的校验行为 --> <form [formGroup]="formModel" (ngSubmit)="o ...

  3. JS之Form表单相关操作

    获取ID组件的值 var userid=document.getElementById('userid').value;var cdkey=document.getElementById('cdkey ...

  4. Form 表单相关小技巧

    JS ---textarea 高度自适应 var realH = this.scrollHeight + 10+ "px"; $(this).css("height&qu ...

  5. 按下回车默认提交form表单问题

    最近开发中碰到一个问题,项目中有几个列表展示页面,允许用户通过查询条件模糊查询数据.用户录入关键字后点击回车会调用查询方法根据关键字查询,原先功能没有问题,但是最近发现在查询输入框中按下回车会直接刷新 ...

  6. 霸气側漏的HTML5--之--强大的form表单

    今天学习了一下html5,发现他真的太强大了,暂不说新增的画布,通信,本地存储等的炸天功能,就连表单也是异常的好用.忍不住发一篇博客和大家分享一下.原谅我标题党了.以后的html5的学习记录博文就以& ...

  7. 表单相关标签之form标签

    表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含 menus.textarea.fieldset.legend 和 label 元素以及其它块级元素 表单用 ...

  8. Angular4——7.表单处理

    在Angular中存在两种表单处理方式: 模版驱动式表单 表单的数据模型是通过组件模版中的相关指令来定义的.由于使用这种方式定义表单的数据模型时,我们会受限于HTML的语法,所以,模版驱动方式只适用于 ...

  9. 细说 Form (表单)

    细说 Form (表单) Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.net WebForms框架为了帮助 ...

随机推荐

  1. ArrayBlockingQueue 和LinkedBlockQueue

    ArrayBlockingQueue ArrayBlockingQueue是Java多线程常用的线程安全的一个集合,基于数组实现,继承自AbstractQueue,实现了BlockingQueue和S ...

  2. 2016.10.5初中部上午NOIP普及组比赛总结

    2016.10.5初中部上午NOIP普及组比赛总结 这次的题目出得挺有质量的.但我觉得我更应该努力了. 进度: 比赛:0+20+0+0=20 改题:AC+AC+AC+AC=AK kk的作业 这题我错得 ...

  3. js实现获取两个日期之间所有日期的方法

    function getDate(datestr){ var temp = datestr.split("-"); var date = new Date(temp[0],temp ...

  4. jeecms v9 vue-CLI开发环境配置

    vue-CLI开发环境配置 Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需几分钟即可创建并启动一个带热重载.保存时静 ...

  5. 使用Ajax在HTML页面中局部刷新页面(左边菜单右边页面)

    转载自:https://blog.csdn.net/Cenmen_17714/article/details/80969008 index.html <a href="javascri ...

  6. Cesium官方教程7--三维模型

    原文地址:https://cesiumjs.org/tutorials/3D-Models-Tutorial/ 三维模型 (3D Models) 这篇教程给大家介绍,如何在Cesium中通过Primi ...

  7. matlab调用keras深度学习模型(环境搭建)

    matlab没有直接调用tensorflow模型的接口,但是有调用keras模型的接口,而keras又是tensorflow的高级封装版本,所以就研究一下这个……可以将model-based方法和le ...

  8. 上传本地项目到码云(gitee)

    1.码云上创建一个项目比如zhirong 2.本地创建一个文件夹F:\workspace\zhirong-items,进入zhirong-items打开git bash 3.执行git init ,这 ...

  9. HDU--2126 Buy the souvenirs(二维01背包)

    题目http://acm.hdu.edu.cn/showproblem.php?pid=2126 分析:有两个要求,一是计算最多可以选多少中纪念品:而是计算选最多纪念品的方案有多少种, 即统计最优方案 ...

  10. Neo4j删除节点和关系、彻底删除节点标签名

    https://www.jianshu.com/p/59bd829de0de 总结提前: [1]先删关系,再删节点 [2]当记不得关系名时,type(r)可以查到关系名 [3]彻底删除节点标签名,需要 ...