Angular 响应式表单基础例子

guqiu 发布于2019-08-23 15:22 / 2689人阅读

摘要：注入服务生成表单控件提供了一个语法糖，以简化或实例的创建过程。导致在输入的时候，表单校验错误，却显示不了错误信息。因此需要再次判断状态，只要表单值改变，则为未对表单操作时，点击提交按钮时，则模拟表单被，显示提示信息

1、案例需求

表单提交，表单全部校验成功才能提交，当表单校验错误，表单边框变红，同时有错误提示信息，有重置功能

2、代码分析

在线预览

git仓库

本案例中使用了响应式表单，响应式表单在表单的校验方面非常方便

2.1、注册 ReactiveFormsModule

要使用响应式表单，就要从 @angular/forms 包中导入 ReactiveFormsModule 并把它添加到你的 NgModule 的 imports 数组中。

app.module.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    ReactiveFormsModule
  ]

2.2、使用 FormBuilder 来生成表单控件

当需要与多个表单打交道时，手动创建多个表单控件实例会非常繁琐。FormBuilder 服务提供了一些便捷方法来生成表单控件。FormBuilder 在幕后也使用同样的方式来创建和返回这些实例，只是用起来更简单。

注入 FormBuilder 服务

constructor(
    private fb: FormBuilder
  ) { }

生成表单控件

FormBuilder 提供了一个语法糖，以简化 FormControl、FormGroup 或 FormArray 实例的创建过程。它会减少构建复杂表单时所需的样板代码的数量（new FormControl）。

formGroup: FormGroup;

this.formGroup = this.fb.group({
      name: "",
      age: "",
      sex: ""
    });

2.3、FormGroupDirective

formGroup 是一个输入指令，它接受一个 formGroup 实例，它会使用这个 formGroup 实例去匹配 FormControl、FormGroup、FormArray 实例，所以模版中的 formControlName 必须和 formGroup 中的 name 匹配。


  
    姓名：
    
      {{nameErrorMessage}}

2.4、表单状态

每个表单控件都有自己的状态，共五个状态属性，都是布尔值。

valid 表单值是否有效

pristine 表单值是否未改变

dirty 表单值是否已改变

touched 表单是否已被访问过

untouched 表单是否未被访问过

以输入姓名的表单为例，只验证该表单的必填项时。表单先获取焦点并且输入姓名，最后移除焦点，每一步表单的状态如下：

初始状态
状态	值
valid	false
pristine	true
dirty	false
touched	false
untouched	true

输入状态
状态	值
valid	true
pristine	false
dirty	true
touched	false
untouched	true

失去焦点后状态
状态	值
valid	true
pristine	false
dirty	true
touched	true
untouched	true

2.5、表单校验

表单验证用于验证用户的输入，以确保其完整和正确。Angular内置的了一些校验器，如 Validators.required， Validators.maxlength，Validators.minlength， Validators.pattern，但是不能自定义错误提示信息，所以实用性不强，满足不了业务场景的需求，于是我们可以自定义表单校验器。

自定义表单校验器

name-validator.ts

import { AbstractControl, ValidatorFn } from "@angular/forms";

export function nameValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {

    if (!control.value) {
      return { message: "请输入必选项" };
    }

    if (control.value.length > 10) {
      return { message: "名称大于10位了" };
    }

    return null;

  };
}

使用自定义验证器

app.component.ts

this.formGroup = this.fb.group({
      name: ["", nameValidator()],
      age: ["", ageValidator()],
      sex: ["", sexValidator()]
    });

显示错误提示信息

当页面初始化的时候不应该显示错误信息，也就是表单touched为true

// Error
private errorMessage(name): string {
    const control = this.formGroup.controls[name];
    return (control.touched && control.invalid) ? control.errors.message : "";
  }

然而touched只有失去焦点才为true，在输入的时候一直为false。导致在输入的时候，表单校验错误，却显示不了错误信息。因此需要再次判断 dirty 状态，只要表单值改变，则为false

private errorMessage(name): string {
    const control = this.formGroup.controls[name];
    return ((control.touched || control.dirty) && control.invalid) ? control.errors.message : "";
  }

2.6、markAsTouched

未对表单操作时，点击提交按钮时，则模拟表单被touched，显示提示信息

markFormGroupTouched(formGroup: FormGroup) {
    (Object).values(formGroup.controls).forEach(item => {
      if (item.controls) {
        this.markFormGroupTouched(item);
      } else {
        item.markAsTouched();
      }
    });
  }

混合云云服务器响应式响应式布局响应式网站响应式设计

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

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

angular6的响应式表单

摘要：在模块里面引入要使用响应式表单，就要从包中导入，并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1：在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的N...

alogy 2019-08-29 16:54 评论0 收藏0
angular6的响应式表单

摘要：在模块里面引入要使用响应式表单，就要从包中导入，并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1：在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的N...

hzc 2019-08-02 11:40 评论0 收藏0
angular6的响应式表单

摘要：在模块里面引入要使用响应式表单，就要从包中导入，并把它添加到你的的数组中。导入验证器函数响应式表单包含了一组开箱即用的常用验证器函数。这些验证器属性可以和响应式表单提供的内置验证器组合使用。 1：在AppModule模块里面引入 ReactiveFormsModule 要使用响应式表单，就要从@angular/forms包中导入ReactiveFormsModule，并把它添加到你的N...

MycLambert 2019-08-23 12:16 评论0 收藏0
angular4 学习记录 -- 表单

摘要：在表单上添加的会拦截标准的表单提交事件。并为它们提供了一些共同的行为和属性，其中有些是可观察对象。用于跟踪一个单独的表单控件的值和有效性状态。组件中的顶级表单就是一个。在表单所在的中的上添加，再在指定的验证方法中调用来显示验证失败信息。 angular4 表单模板表单在app.module中导入FormsModule之后，项目中的form表单都会是一个ngForm，也就是一个模板表...

james 2019-08-21 16:45 评论0 收藏0
Angular 响应式表单之表单分组

摘要：跟踪独立表单控件的值和验证状态。当使用响应式表单时，类是最基本的构造块。因此在查看单个表单是否有错误信息时，必须先判断是子组件还是孙子组件。方法检查组内是否有一个具有指定名字的已启用的控件，存在返回，不存在返回。 1、案例需求表单提交，表单全部校验成功才能提交，当表单校验错误，表单边框变红，同时有错误提示信息，有重置功能在线预览 git仓库 2、名词解释在分析代码之前，首先明...

huaixiaoz 2019-08-23 15:24 评论0 收藏0