angular4 学习记录 -- 表单

james 发布于2019-08-21 16:45 / 2867人阅读

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

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”的字段添加至表单控件上。
例：

    
        
    
    {{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("", [Validators.required]),
      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.required, Validators.email]],
      password: ["", Validators.required],
      repeat: ["", Validators.required],
      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

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

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

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

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

Jackwoo 2019-08-29 15:37 评论0 收藏0
前端框架这么多，该如何抉择？

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

lemon 2019-08-26 11:59 评论0 收藏0
前端框架这么多，该如何抉择？

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

alphahans 2019-08-02 10:38 评论0 收藏0
利用angular4和nodejs-express构建一个简单的网站（九）—用户登录

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

Snailclimb 2019-08-30 14:21 评论0 收藏0