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. 转载:shell中#*,##*,#*,##*,% *,%% *的含义及用法

    介绍下Shell中的${}.##和%%使用范例,本文给出了不同情况下得到的结果.假设定义了一个变量为:代码如下:file=/dir1/dir2/dir3/my.file.txt可以用${ }分别替换得 ...

  2. 工业派-配置Intel神经计算棒二代(NCS2)

    最近两天在工业派ubuntu16.04上配置了Intel神经计算棒二代——Intel Neural Compute Stick,配置过程之艰辛我都不想说了,实在是太折磨人.不过历尽千辛万苦,总算让计算 ...

  3. ES6之主要知识点(十)Proxy

    Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程. Proxy 可以理解成,在目标对象之前架设一层“拦 ...

  4. vue 报错:Cannot read property '_wrapper' of undefined

    我的情况是@click="xx" ,而xx函数未定义

  5. python中如何去除列表中重复元素?

    方法一: 用内置函数set: list1 = [1, 2, 3, 3, 4, 4, 5, 6, 6, 6, 7, 8, 9] list2 = list(set(list1)) print(list2) ...

  6. Gym 100712H

    Gym 100712Hhttps://vjudge.net/problem/195715/origin先缩点,再建立新图,然后跑两遍dfs求树上最长路 #include<iostream> ...

  7. 廖雪峰Java11多线程编程-1线程的概念-3线程的状态

    1线程的状态 线程终止的的原因: run()或call()方法执行完成,线程正常结束 线程抛出一个未捕获的Exception或Error 直接调用该线程的stop()方法来结束该线程--该方法容易导致 ...

  8. day19 作业

    今日作业 1.什么是对象?什么是类? 对象:特征和技能的结合体 类:一系列对象 相同的特征和技能的结合体 2.绑定方法的有什么特点 对象调用类内部的函数 称之为绑定方法,特点: 不同的对象调用该绑定方 ...

  9. SDF与MDF的区别

    标签: 杂谈   数据库扩展名为.sdf,是一个基于sql server compact edition的数据库文件,不需要安装SQL Server就可以用 基于服务的数据库扩展名为.mdf,是基于S ...

  10. Entity Framework底层操作封装V2版本号(5)

    这个框架到如今最大的变化立即就要出现了,哪就是对缓存的使用.由于系统常常要去读取数据库数据.可是大家知道.数据库的处理能力是有限的,所以对于一些数据量不大,可是又 须要常常去读取的功能来说.更好的方法 ...