Angular2 中如何处理表单数据的提交和验证

随着前端技术的发展，Web 应用程序已经成为人们生活与工作中不可或缺的一部分。其中，表单数据的提交和验证是 Web 应用程序中非常重要且基本的功能。而 Angular2 是一种流行的前端框架，它提供了强大的表单处理和验证功能，方便开发人员处理各种表单数据。

Angular2 表单模块

Angular2 的表单模块主要由两部分组成：模板驱动表单和响应式表单。让我们先了解一下它们的区别。

模板驱动表单

模板驱动表单是 Angular2 最简单和最常用的表单处理方式。它是通过给表单元素添加 ngModel 指令从而把表单的值绑定到组件类中的属性。我们可以使用 ngForm、ngModel 和一些其它指令来完成表单元素的绑定和验证。

以下是一个简单的示例：

<form (submit)="onSubmit()" #myForm="ngForm">
  <div>
    <label for="name">名称：</label>
    <input type="text" id="name" name="name" [(ngModel)]="model.name" required />
  </div>
  <div>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" [(ngModel)]="model.email" required />
  </div>
  <div>
    <label for="address">地址：</label>
    <textarea id="address" name="address" [(ngModel)]="model.address" required></textarea>
  </div>
  <button type="submit" [disabled]="!myForm.form.valid">提交</button>
</form>

在上面的代码中，我们使用了 ngForm、ngModel 和 required 指令来完成表单元素的绑定和验证。在组件类中，我们定义了一个 model 对象，它用来存储表单数据。onSubmit() 方法用来处理表单的提交事件。[disabled] 属性用来禁用提交按钮，如果表单的验证没有通过，该按钮就会被禁用。

响应式表单

响应式表单是 Angular2 更复杂和更灵活的表单处理方式。它是通过使用 FormGroup、FormControl、FormArray 和其它一些类来构建表单模型。我们可以使用这些类的方法来完成表单的操作和验证。

以下是一个简单的示例：

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

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="myForm" (submit)="onSubmit()">
      <div>
        <label for="name">名称：</label>
        <input type="text" id="name" name="name" [formControl]="myForm.controls['name']">
      </div>
      <div>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" [formControl]="myForm.controls['email']">
      </div>
      <div>
        <label for="address">地址：</label>
        <textarea id="address" name="address" [formControl]="myForm.controls['address']"></textarea>
      </div>
      <button type="submit" [disabled]="!myForm.valid">提交</button>
    </form>
  `,
})
export class AppComponent {
  myForm: FormGroup;

  constructor() {
    this.myForm = new FormGroup({
      name: new FormControl('', Validators.required),
      email: new FormControl('', Validators.compose([Validators.required, Validators.email])),
      address: new FormControl('', Validators.required),
    });
  }

  onSubmit() {
    console.log(this.myForm.value);
  }
}

在上面的代码中，我们使用了 FormGroup、FormControl 和 Validators 类来构建表单模型。在组件类中，我们定义了一个 myForm 对象，它表示整个表单模型。在构造函数中，我们创建了表单模型中的每个表单控件，并给它们添加了验证规则。使用这些控件的实例来绑定表单元素的值。onSubmit() 方法用来处理表单的提交事件。

表单验证

对于表单数据的提交，数据验证是必须的。Angular2 提供了可靠的表单验证机制，我们可以使用内置的验证器或者自定义的验证器来进行验证。

内置的验证器

Angular2 内置了许多验证器，可以直接在表单控件的构造函数中使用。以下是一些常用的验证器：

  • required：必填项验证器；
  • minLength：最小长度验证器；
  • maxLength：最大长度验证器；
  • pattern：正则表达式验证器；
  • email：邮箱格式验证器；
  • min：最小值验证器；
  • max：最大值验证器；
  • nullValidator：空值验证器。

在使用时，我们只需要在表单控件的构造函数中添加需要的验证器即可。例如：

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

@Component({
  selector: 'my-app',
  template: `
    <form>
      <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" [formControl]="usernameCtrl">
        <span *ngIf="usernameCtrl.errors && (usernameCtrl.dirty || usernameCtrl.touched)">
          <span *ngIf="usernameCtrl.errors.required">用户名是必填项！</span>
          <span *ngIf="usernameCtrl.errors.minlength">用户名不能少于 5 个字符！</span>
          <span *ngIf="usernameCtrl.errors.maxlength">用户名不能多于 10 个字符！</span>
        </span>
      </div>
    </form>
  `,
})
export class AppComponent {
  usernameCtrl: FormControl = new FormControl('', [
    Validators.required,
    Validators.minLength(5),
    Validators.maxLength(10),
  ]);
}

在上面的代码中，我们使用了 Validators.required、Validators.minLength(5) 和 Validators.maxLength(10) 验证器来验证表单控件。如果表单控件的值不符合这些规则，就会被标记为有错误，我们可以通过 usernameCtrl.errors 属性访问错误信息。

自定义验证器

如果内置的验证器不能满足我们的需求，我们可以使用自定义的验证器。自定义验证器是一个函数，它接受表单控件作为参数，并返回一个对象，用来表示验证的结果。

以下是一个自定义验证器的示例：

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

function forbiddenNameValidator(control: FormControl): { [key: string]: any } {
  const forbidden = /admin/.test(control.value);
  return forbidden ? { forbiddenName: { value: control.value } } : null;
}

@Component({
  selector: 'my-app',
  template: `
    <form>
      <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" [formControl]="usernameCtrl">
        <span *ngIf="usernameCtrl.errors && (usernameCtrl.dirty || usernameCtrl.touched)">
          <span *ngIf="usernameCtrl.errors.required">用户名是必填项！</span>
          <span *ngIf="usernameCtrl.errors.minlength">用户名不能少于 5 个字符！</span>
          <span *ngIf="usernameCtrl.errors.maxlength">用户名不能多于 10 个字符！</span>
          <span *ngIf="usernameCtrl.errors.forbiddenName">用户名不能包含 'admin'！</span>
        </span>
      </div>
    </form>
  `,
})
export class AppComponent {
  usernameCtrl: FormControl = new FormControl('', [
    Validators.required,
    Validators.minLength(5),
    Validators.maxLength(10),
    forbiddenNameValidator,
  ]);
}

在上面的代码中，我们定义了一个 forbiddenNameValidator 函数，它根据正则表达式去验证表单控件的值。如果符合规则，就返回一个包含错误信息的对象，否则返回 null。

表单数据的提交

在 Angular2 中，我们可以使用 ngSubmit 事件来处理表单数据的提交。不过，除了 ngSubmit 事件，我们还可以使用如下两种方式来提交表单数据：

  • 模板驱动表单：使用模板变量（#form）来获取表单的引用并传递给组件的方法；
  • 响应式表单：使用表单模型来获取表单的值并传递给组件的方法。

以下是一个表单数据提交的示例：

<!-- 模板驱动表单 -->
<form #form="ngForm" (submit)="onSubmit(form)" novalidate>
  <!-- 表单元素 -->
</form>

<!-- 响应式表单 -->
<form [formGroup]="formGroup" (submit)="onSubmit()" novalidate>
  <!-- 表单元素 -->
</form>

在组件类中，我们可以定义一个 onSubmit() 方法来处理表单数据的提交。在模板驱动表单中，我们需要使用模板变量来传递表单的引用，然后在 onSubmit() 方法中使用 form.value 获取表单的值。

在响应式表单中，我们需要通过表单模型来获取表单的值，例如：

onSubmit() {
  console.log(this.formGroup.value);
}

在上面的代码中，我们使用 this.formGroup.value 获取了表单的值。如果表单的数据不符合规则，我们可以使用如下代码告诉 Angular2 直接阻止表单的提交：

onSubmit() {
  if (this.formGroup.invalid) {
    return false;
  }
}

总结

通过这篇文章，我们了解了 Angular2 中如何处理表单数据的提交和验证。我们可以使用模板驱动表单或者响应式表单来完成表单数据的绑定和操作。同时，Angular2 提供了丰富的表单验证器，可以满足我们各种验证需求。最后，请不要忘记在提交表单数据时进行有效性验证，以确保数据的完整性和正确性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6590e01aeb4cecbf2d62594c

阅读全文
纠错
反馈

精选内容

相关推荐

    暂无