Angular 响应式表单 基础例子

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

formGroup: FormGroup;

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

2.3、FormGroupDirective

formGroup 是一个输入指令,它接受一个 formGroup 实例,它会使用这个 formGroup 实例去匹配 FormControl、FormGroup、FormArray 实例,所以模版中的 formControlName 必须和 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.4、表单状态

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

  • valid 表单值是否有效
  • pristine 表单值是否未改变
  • dirty 表单值是否已改变
  • touched 表单是否已被访问过
  • untouched 表单是否未被访问过

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

初始状态
状态
validfalse
pristinetrue
dirtyfalse
touchedfalse
untouchedtrue
输入状态
状态
validtrue
pristinefalse
dirtytrue
touchedfalse
untouchedtrue
失去焦点后状态
状态
validtrue
pristinefalse
dirtytrue
touchedtrue
untouchedtrue

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) {
    (<any>Object).values(formGroup.controls).forEach(item => {
      if (item.controls) {
        this.markFormGroupTouched(item);
      } else {
        item.markAsTouched();
      }
    });
  }
    原文作者:前端
    原文地址: https://segmentfault.com/a/1190000018233598
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞