欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

关于Angular中响应式表单的介绍

程序员文章站 2022-03-30 20:01:07
...
这篇文章主要介绍了关于Angular中响应式表单的介绍，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

响应式表单是在组件类中编写逻辑，验证规则，这与在模板中完成控制的模板驱动式表单不同。响应式表单反应形式是灵活的，可用于处理任何复杂的形式场景。 我们编写更多的组件代码和更少的HTML代码，使单元测试更容易。

Form base and interface

Form base

<form novalidate>
  <label>
    <span>Full name</span>
    <input
      type="text"
      name="name"
      placeholder="Your full name">
  </label>
  <p>
    <label>
      <span>Email address</span>
      <input
        type="email"
        name="email"
        placeholder="Your email address">
    </label>
    <label>
      <span>Confirm address</span>
      <input
        type="email"
        name="confirm"
        placeholder="Confirm your email address">
    </label>
  </p>
  <button type="submit">Sign up</button>
</form>

接下来我们要实现的功能如下：

  • 绑定 name、email、confirm 输入框的值

  • 为所有输入框添加表单验证功能

  • 显示验证异常信息

  • 表单验证失败时，不允许进行表单提交

  • 表单提交功能

User interface

// signup.interface.ts
export interface User {
  name: string;
  account: {
    email: string;
    confirm: string;
  }
}

ngModule and reactive forms

在我们继续深入介绍 reactive forms 表单前，我们必须在 @NgModule 中导入 @angular/forms 库中的 ReactiveFormsModule：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ...,
    ReactiveFormsModule
  ],
  declarations: [...],
  bootstrap: [...]
})
export class AppModule {}
友情提示：若使用 reactive forms，则导入 ReactiveFormsModule；若使用 template-driven 表单，则导入 FormsModule。

Reactive approach

我们将基于上面的定义的基础表单，创建 SignupFormComponent ：

signup-form.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'signup-form',
  template: `
    <form novalidate>...</form>
  `
})
export class SignupFormComponent {
  constructor() {}
}

这是一个基础的组件，在我们实现上述功能前，我们需要先介绍 FormControl、FormGroup、FormBuilder 的概念和使用。

FormControl and FormGroup

我们先来介绍一下 FormControl 和 FormGroup 的概念：

FormControl - 它是一个为单个表单控件提供支持的类，可用于跟踪控件的值和验证状态，此外还提供了一系列公共API。

使用示例：

ngOnInit() {
  this.myControl = new FormControl('');
}
FormGroup - 包含是一组 FormControl 实例，可用于跟踪 FormControl 组的值和验证状态，此外也提供了一系列公共API。

使用示例：

ngOnInit() {
  this.myGroup = new FormGroup({
    name: new FormControl(''),
    location: new FormControl('')
  });
}

现在我们已经创建了 FormControl 和 FormGroup 实例，接下来我们来看一下如何使用：

<form novalidate [formGroup]="myGroup">
  Name: <input type="text" formControlName="name">
  Location: <input type="text" formControlName="location">
</form>

上面示例中，我们必须使用 [formGroup] 绑定我们创建的 myGroup 对象，除此之外还要使用 formControlName 指令，绑定我们创建的 FormControl 控件。此时的表单结构如下：

FormGroup -> 'myGroup'
    FormControl -> 'name'
    FormControl -> 'location'

Implementing our FormGroup model

signup.interface.ts

export interface User {
  name: string;
  account: {
    email: string;
    confirm: string;
  }
}

与之对应的表单结构如下：

FormGroup -> 'user'
    FormControl -> 'name'
    FormGroup -> 'account'
        FormControl -> 'email'
        FormControl -> 'confirm'

是的，我们可以创建嵌套的 FormGroup 集合！让我们更新一下组件 (不包含初始数据)：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({...})
export class SignupFormComponent implements OnInit {
  user: FormGroup;
  ngOnInit() {
    this.user = new FormGroup({
      name: new FormControl(''),
      account: new FormGroup({
        email: new FormControl(''),
        confirm: new FormControl('')
      })
    });
  }
}

如果我们想要设置初始数据，我们可以按照上述示例进行设置。通常情况下，我们通过服务端提供的 API 接口来获取表单的初始信息。

Binding our FormGroup model

现在我们已经实例化了 FormGroup 模型，是时候绑定到对应的 DOM 元素上了。具体示例如下：

<form novalidate [formGroup]="user">
  <label>
    <span>Full name</span>
    <input
      type="text"
      placeholder="Your full name"
      formControlName="name">
  </label>
  <p formGroupName="account">
    <label>
      <span>Email address</span>
      <input
        type="email"
        placeholder="Your email address"
        formControlName="email">
    </label>
    <label>
      <span>Confirm address</span>
      <input
        type="email"
        placeholder="Confirm your email address"
        formControlName="confirm">
    </label>
  </p>
  <button type="submit">Sign up</button>
</form>

现在 FormGroup 与 FormControl 对象与 DOM 结构的关联信息如下：

// JavaScript APIs
FormGroup -> 'user'
    FormControl -> 'name'
    FormGroup -> 'account'
        FormControl -> 'email'
        FormControl -> 'confirm'

// DOM bindings
formGroup -> 'user'
    formControlName -> 'name'
    formGroupName -> 'account'
        formControlName -> 'email'
        formControlName -> 'confirm'

Reactive submit

跟模板驱动的表单一样，我们可以通过 ngSubmit 输出属性，处理表单的提交逻辑：

<form novalidate (ngSubmit)="onSubmit()" [formGroup]="user">
  ...
</form>

Reactive error validation

接下来我们来为表单添加验证规则，首先我们需要从 @angular/forms 中导入 Validators。具体使用示例如下：

ngOnInit() {
  this.user = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(2)]),
    account: new FormGroup({
      email: new FormControl('', Validators.required),
      confirm: new FormControl('', Validators.required)
    })
  });
}

通过以上示例，我们可以看出，如果表单控制包含多种验证规则，可以使用数组声明多种验证规则。若只包含一种验证规则，直接声明就好。通过这种方式，我们就不需要在模板的输入控件中添加 required 属性。接下来我们来添加表单验证失败时，不允许进行表单提交功能：

<form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
  ...
  <button type="submit" [disabled]="user.invalid">Sign up</button>
</form>

那么问题来了，我们要如何获取表单控件的验证信息？我们可以使用模板驱动表单中介绍的方式，具体如下：

<form novalidate [formGroup]="user">
  {{ user.controls.name?.errors | json }}
</form>

此外我们也可以使用 FormGroup 对象提供的 API，来获取表单控件验证的错误信息：

<form novalidate [formGroup]="user">
  {{ user.get('name').errors | json }}
</form>

现在我们来看一下完整的代码：

import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { User } from './signup.interface';

@Component({
  selector: 'signup-form',
  template: `
    <form novalidate (ngSubmit)="onSubmit(user)" [formGroup]="user">
      <label>
        <span>Full name</span>
        <input type="text" placeholder="Your full name" formControlName="name">
      </label>
      <p class="error" *ngIf="user.get('name').hasError('required') && 
            user.get('name').touched">
        Name is required
      </p>
      <p class="error" *ngIf="user.get('name').hasError('minlength') && 
            user.get('name').touched">
        Minimum of 2 characters
      </p>
      <p formGroupName="account">
        <label>
          <span>Email address</span>
          <input type="email" placeholder="Your email address" formControlName="email">
        </label>
        <p
          class="error"
          *ngIf="user.get('account').get('email').hasError('required') && 
             user.get('account').get('email').touched">
          Email is required
        </p>
        <label>
          <span>Confirm address</span>
          <input type="email" placeholder="Confirm your email address" 
             formControlName="confirm">
        </label>
        <p
          class="error"
          *ngIf="user.get('account').get('confirm').hasError('required') && 
             user.get('account').get('confirm').touched">
          Confirming email is required
        </p>
      </p>
      <button type="submit" [disabled]="user.invalid">Sign up</button>
    </form>
  `
})
export class SignupFormComponent implements OnInit {
  user: FormGroup;
  constructor() {}
  ngOnInit() {
    this.user = new FormGroup({
      name: new FormControl('', [Validators.required, Validators.minLength(2)]),
      account: new FormGroup({
        email: new FormControl('', Validators.required),
        confirm: new FormControl('', Validators.required)
      })
    });
  }
  onSubmit({ value, valid }: { value: User, valid: boolean }) {
    console.log(value, valid);
  }
}

功能是实现了，但创建 FormGroup 对象的方式有点繁琐，Angular 团队也意识到这点，因此为我们提供 FormBuilder ，来简化上面的操作。

Simplifying with FormBuilder

首先我们需要从 @angular/forms 中导入 FormBuilder：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class SignupFormComponent implements OnInit {
  user: FormGroup;
  constructor(private fb: FormBuilder) {}
  ...
}

然后我们使用 FormBuilder 对象提供的 group() 方法，来创建 FormGroup 和 FormControl 对象：

调整前的代码 (未使用FormBuilder)：

ngOnInit() {
  this.user = new FormGroup({
    name: new FormControl('', [Validators.required, Validators.minLength(2)]),
    account: new FormGroup({
      email: new FormControl('', Validators.required),
      confirm: new FormControl('', Validators.required)
    })
  });
}

调整后的代码 (使用FormBuilder)：

ngOnInit() {
  this.user = this.fb.group({
    name: ['', [Validators.required, Validators.minLength(2)]],
    account: this.fb.group({
      email: ['', Validators.required],
      confirm: ['', Validators.required]
    })
  });
}

对比一下调整前和调整后的代码，是不是感觉一下子方便了许多。此时更新完后完整的代码如下：

@Component({...})
export class SignupFormComponent implements OnInit {
  user: FormGroup;
  constructor(private fb: FormBuilder) {}
  ngOnInit() {
    this.user = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(2)]],
      account: this.fb.group({
        email: ['', Validators.required],
        confirm: ['', Validators.required]
      })
    });
  }
  onSubmit({ value, valid }: { value: User, valid: boolean }) {
    console.log(value, valid);
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

基于vue.js的dialog插件art-dialog-vue2.0的发布内容

AngularJs与Angular 常用的指令写法的区别

以上就是关于Angular中响应式表单的介绍的详细内容，更多请关注其它相关文章！

相关标签： javascript

上一篇： PHP二维数组去重实例分析

下一篇： 关于vue antV G2-3.X组件化的介绍

推荐阅读