资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/angular4 学习记录 -- 表单

angular4 学习记录 -- 表单

james / 2958人阅读

摘要：在表单上添加的会拦截标准的表单提交事件。并为它们提供了一些共同的行为和属性，其中有些是可观察对象。用于跟踪一个多带带的表单控件的值和有效性状态。组件中的顶级表单就是一个。在表单所在的中的上添加，再在指定的验证方法中调用来显示验证失败信息。

angular4 表单 模板表单

在app.module中导入FormsModule之后，项目中的form表单都会是一个ngForm，也就是一个模板表单。

</>复制代码 
  1. import { NgModule } from "@angular/core";
  2. import { CommonModule } from "@angular/common";
  3. import { FormsModule } from "@angular/forms";
  4. @NgModule({
  5.   imports: [
  6.     CommonModule,
  7.     FormsModule
  8.   ],
  9.   exports: [],
  10.   declarations: []
  11. })
  12. export class AppModule { }

在表单上添加的ngForm会拦截标准的hmlt表单提交事件。

ngModel和FormControl

在表单元素中添加了ngmodel属性，这代表着创建了一个FormControl控件。

将第一步中的控件放至form中,Form会自动将该FormControl控件注册为Form的子控件。只有表单元素上在添加了ngModel的基础上再添加name属性，才会将name=“nickname”的字段添加至表单控件上。
例：

</>复制代码 
  1.     
  2.         
  3.     
  4.     {{myForm.value | json}}         //这里将以{{"nickname": xxx}}输出input输入框中的内容

单向数据绑定

</>复制代码 
  1. 具体使用`[ngModel]="xxx"`

双向数据绑定

</>复制代码 
  1. 具体使用`[(ngModel)]="xxx"`

ngModelGroup

简单来说，是一组 FormControl

响应式表单 响应式表单中一些常用的类

AbstractControl是三个具体表单类的抽象基类。 并为它们提供了一些共同的行为和属性，其中有些是可观察对象（Observable）。

FormControl 用于跟踪一个多带带的表单控件的值和有效性状态。它对应于一个HTML表单控件，比如输入框和下拉框。

FormGroup用于 跟踪一组AbstractControl的实例的值和有效性状态。 该组的属性中包含了它的子控件。 组件中的顶级表单就是一个FormGroup。

FormArray用于跟踪AbstractControl实例组成的有序数组的值和有效性状态。

具体使用

在使用响应式表单之前，也需要在app.module中添加import。

</>复制代码 
  1. import {ReactiveFormsModule} from "@angular/forms";
  2. @NgModule({
  3.   // 省略其他
  4.     imports: [..., ReactiveFormsModule],
  5.   // 省略其他
  6. })
  7. // 省略其他
区别：响应式表单与模板表单最大的区别在于响应式表单并不是直接地将form中的value直接绑定在html中的标签上，而是只是简单地声明了一下formControlName，再在component上将对应的formControlName的表单元素实例化FormControl 
</>复制代码 
  1. ngOnInit() {
  2.     // 初始化表单
  3.     this.user = new FormGroup({
  4.       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}/)]),
  5.       password: new FormControl("", [Validators.required]),
  6.       repeat: new FormControl("", [Validators.required]),
  7.       address: new FormGroup({
  8.         province: new FormControl(""),
  9.         city: new FormControl(""),
  10.         area: new FormControl(""),
  11.         addr: new FormControl("")
  12.       })
  13.     });
  14. }
FomBuilder

FormBuilder的存在就是为了能够快速构建表单。具体使用形式：

</>复制代码 
  1. constructor(private fb: FormBuilder) {}
  2. ngOnInit() {
  3.     // 初始化表单
  4.     this.user = this.fb.group({
  5.       email: ["", [Validators.required, Validators.email]],
  6.       password: ["", Validators.required],
  7.       repeat: ["", Validators.required],
  8.       address: this.fb.group({
  9.         province: [],
  10.         city: [],
  11.         area: [],
  12.         addr: []
  13.       })
  14.     });
  15. }
表单验证

目前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

云服务器 GPU云服务器 angular4 asp 记录登陆记录 a主机记录多个记录值 cn域名的ns记录记录

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88688.html

相关文章

  • 前端框架这么多，该如何抉择？

    摘要：在引起状态变化的时刻，框架自动触发脏检查，也可以手动执行脏检查，直接操作更新视图。最后，说了这么多，大家在具体选型时还是要首先分析自己的需求和现状，然后再做选择。 作为一个软件开发者，最大的挑战就是在不断涌现的新技术中进行取舍，持续学习是从事这一行业的必备技能。在这个领域里，技术更新最快地又非前端莫属了。各种框架的出现、版本的更新此起彼伏，呈现出一派欣欣向荣之景。 在项目中必不可少的便...

    Jackwoo 评论0 收藏0

  • 前端框架这么多，该如何抉择？

    摘要：在引起状态变化的时刻，框架自动触发脏检查，也可以手动执行脏检查，直接操作更新视图。最后，说了这么多，大家在具体选型时还是要首先分析自己的需求和现状，然后再做选择。 作为一个软件开发者，最大的挑战就是在不断涌现的新技术中进行取舍，持续学习是从事这一行业的必备技能。在这个领域里，技术更新最快地又非前端莫属了。各种框架的出现、版本的更新此起彼伏，呈现出一派欣欣向荣之景。 在项目中必不可少的便...

    lemon 评论0 收藏0

  • 前端框架这么多，该如何抉择？

    摘要：在引起状态变化的时刻，框架自动触发脏检查，也可以手动执行脏检查，直接操作更新视图。最后，说了这么多，大家在具体选型时还是要首先分析自己的需求和现状，然后再做选择。 作为一个软件开发者，最大的挑战就是在不断涌现的新技术中进行取舍，持续学习是从事这一行业的必备技能。在这个领域里，技术更新最快地又非前端莫属了。各种框架的出现、版本的更新此起彼伏，呈现出一派欣欣向荣之景。 在项目中必不可少的便...

    alphahans 评论0 收藏0

  • 利用angular4和nodejs-express构建一个简单的网站（九）—用户登录

    摘要：好了，废话少说，继续吧这一章主要讲利用控制用户登录。在前面的用户注册表单中使用了的响应式表单。在构造函数中声明了一个对象一个对象和对象对象。并在构造函数中用的方法更新了网页的标题。接下来导航到下一个页面，并提示用户登录成功。 最近工作比较忙，一直没有更新文章。原来看别人的文章感觉很过瘾，现在自己写才发现，要坚持下去真的很难。好了，废话少说，继续吧！这一章主要讲利用angularJs控制...

    Snailclimb 评论0 收藏0

发表评论

登陆后可评论

0条评论

james

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<