【angular】ReactiveForms响应式表单验证实践（包含设置默认值及重置功能）

最新推荐文章于 2024-12-03 12:30:06 发布

原创

最新推荐文章于 2024-12-03 12:30:06 发布 · 1.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ReactiveForms #响应式表单验证 #Angular

创建表单数据模型

export class FormControlValidatorModel {
   
   
  name: string; // 姓名
  age: string; // 年龄
  hobbyList: string[]; // 爱好
  sex: string; // 性别

  constructor(data: any = {
   
   }) {
   
   
    this.name = data.name || '';
    this.age = data.age || '';
    this.hobbyList = data.hobbyList || [];
    this.sex = data.sex || '';
  }
}

这里列举了一些常用场景；

分析：

通过[formGroup]=“appForm”，显示的声明并创建一个Angular FormGroup实例，从而与原生的Form表单关联起来(angular表单和原生form表单之间的关联关系，可以点这里)；
(ngSubmit)=“onSubmit()”，内置验证成功，表单提交的方法，可以把button type=“submit”设置，提交表单数据的操作；
API的FormGroup说明：有一个setValue，reset，patchValue等方法；

AbstractControl，它是 FormControl、FormGroup 和 FormArray 的基类
构造器支持三个参数

提供了同步和异步验证函数；

不会全部用到，记住几个常用的方法即可；不难发现，通过get方法，对单个表单元素进行验证相关的操作，比如手动修改它的valid状态；

FormControlName，显示声明，并根据名字将现有 FormGroup 中的 FormControl 与一个表单控件进行同步

查看FormControl，通过它跟踪独立表单控件的值和验证状态

在这里插入图片描述
这里面的状态值，和可观察对象流，都是常用的，模板就可以根据touched状态，dirty状态，valid状态进行错误提示；

最终template模板如下

<!-- 表单验证：响应式表单验证 -->
<form [formGroup]="appForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="alterEgo">name</label>
    <input type="text" class="form-control" formControlName="name" [(ngModel)]="appFormModel.name">
    <div class="alert alert-danger"
      [hidden]="appForm.get('name').valid || appForm.get('name').untouched">
      {
   
   {
   
   appForm.getError('result', 'name')?.info}}
    </div>
  </div>

  <div class="form-group">
    <label for="alterEgo">age</label>
    <input type="text" class="form-control" formControlName="age" [(ngModel)]="appFormModel.age">
    <div class="alert alert-danger"
      [hidden]="appForm.get('age').valid || appForm.get('age').untouched">
      {
   
   {
   
   appForm.getError('result', 'age')?.info}}
    </div>
  </div>

  <div class="form-group">
    <label for="hobby">hobby</label>
    <div class="mb1"><app-checkbox value="basketball" [formControl]="appForm.controls['hobbyList']" label="basketball" [(ngModel)]="appFormModel.hobbyList" inputId="BT"></app-checkbox></div>
    <div class="mb1"><app-checkbox value