Angular 响应式表单 基础例子

栏目: JavaScript · 发布时间: 5年前

内容简介:表单提交,表单全部校验成功才能提交,当表单校验错误,表单边框变红,同时有错误提示信息,有重置功能本案例中使用了响应式表单,响应式表单在表单的校验方面非常方便要使用响应式表单,就要从 @angular/forms 包中导入 ReactiveFormsModule 并把它添加到你的 NgModule 的 imports 数组中。

1、案例需求

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

2、代码分析

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

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)。

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

2.3、FormGroupDirective

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

<form [formGroup]="formGroup" (ngSubmit)="submit()" novalidate>
  <div class="form-group">
    <label>姓名:</label>
    <input type="text"
      formControlName="name">
      <p>{{nameErrorMessage}}</p>
  </div>
</form>

2.3、表单状态

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

  • 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.4、表单校验

表单验证用于验证用户的输入,以确保其完整和正确。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.5、markAsTouched

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

markFormGroupTouched(formGroup: FormGroup) {
    Object.values(formGroup.controls).forEach(item => {
      if (item.controls) {  // 当 formGroup中存在 formGroup 时,递归
        this.markFormGroupTouched(item.controls);
      } else {
        item.markAsTouched();
      }
    });
  }

以上所述就是小编给大家介绍的《Angular 响应式表单 基础例子》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

ACM国际大学生程序设计竞赛

ACM国际大学生程序设计竞赛

俞勇 编 / 2012-12 / 29.00元

《ACM国际大学生程序设计竞赛:知识与入门》适用于参加ACM国际大学生程序设计竞赛的本科生和研究生,对参加青少年信息学奥林匹克竞赛的中学生也很有指导价值。同时,作为程序设计、数据结构、算法等相关课程的拓展与提升,《ACM国际大学生程序设计竞赛:知识与入门》也是难得的教学辅助读物。一起来看看 《ACM国际大学生程序设计竞赛》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

SHA 加密
SHA 加密

SHA 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具