在 Angular 中用 TypeScript 处理表单-JavaScript中文网-JavaScript教程资源分享门户

Angular 是一个流行的前端框架，它提供了丰富的功能来简化 Web 应用的开发过程。其中一个非常重要的功能就是处理表单数据。在本文中，我们将向您介绍如何在 Angular 中使用 TypeScript 处理表单数据，并提供示例代码和深度学习指导。

Angular 表单简介

在 Angular 中，表单是一种收集和验证用户输入的方式。Angular 提供了两种主要类型的表单：

响应式表单：这种表单使用 FormControl、FormGroup 和 FormArray 集合来管理表单状态和更改。它们提供了丰富的功能，例如异步验证。
模板驱动表单：这种表单使用模板语法来收集和验证表单数据。与响应式表单相比，它们通常更加简单易用。

在本文中，我们将重点介绍模板驱动表单。

模板驱动表单

在模板驱动表单中，Angular 会根据 HTML 模板中的指令创建表单控件，并使用 ngModel 指令来处理表单数据。以下是一个简单的例子：

<form #myForm="ngForm" (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" ngModel>

  <button type="submit">Submit</button>
</form>

上述代码将创建一个包含一个用户名输入框和一个提交按钮的表单。当用户在输入框中输入名称时，Angular 会自动更新组件类中与该输入框绑定的属性值。

要使用 ngModel 指令，您需要在组件类中引入 FormsModule 模块，并将其添加到 @NgModule 的 imports 数组中：

// www.javascriptcn.com code example
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule
  ],
  // ...
})
export class AppModule { }

现在，您可以在组件类中使用表单数据：

// www.javascriptcn.com code example
import { Component } from '@angular/core';

@Component({
  selector: 'app-form',
  template: `
    <form #myForm="ngForm" (ngSubmit)="onSubmit()">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" ngModel>

      <button type="submit">Submit</button>
    </form>

    <p>Name: {{ formData.name }}</p>
  `
})
export class FormComponent {
  formData: any = {};

  onSubmit() {
    console.log(this.formData);
  }
}

此代码将在表单中收集名称数据，并将其输出到页面上。

验证表单数据

要验证表单数据，您可以使用内置的验证器或编写自定义验证器。例如，要使名称输入框必填，可以添加 required 属性：

// www.javascriptcn.com code example
<form #myForm="ngForm" (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" ngModel required>

  <button type="submit">Submit</button>

  <div *ngIf="myForm.controls['name'].invalid && myForm.controls['name'].touched">
    Name is required.
  </div>
</form>

这将确保输入框中输入的值不为空。如果用户未输入名称，表单将视为无效，并显示错误消息。

在组件类中，您可以检查表单是否有效/无效，以及哪些字段无效：

// www.javascriptcn.com code example
import { Component } from '@angular/core';

@Component({
  selector: 'app-form',
  template: `
    <form #myForm="ngForm" (ngSubmit)="onSubmit()">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" ngModel required>

      <button type="submit">Submit</button>

      <div *ngIf="myForm.controls['name'].invalid && myForm.controls['name'].touched">
        Name is required.
      </div>

      <p>Form is {{ myForm.valid ? 'valid' : 'invalid' }}</p>
    </form>
  `
})
export class FormComponent {
  formData: any = {};

  onSubmit() {
    console.log(this.formData);
  }
}

绑定到模型对象

在某些情况下，您可能希望表单数据绑定到模型对象中的属性。例如，如果您正在收集用户的联系信息，您可以使用模型对象来表示该信息：

export class Contact {
  name: string;
  email: string;
  phone: string;
}

要将模板驱动表单绑定到模型对象，请使用 [(ngModel)] 指令：

// www.javascriptcn.com code example
<form #myForm="ngForm" (ngSubmit)="onSubmit()">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" [(ngModel)]="formData.name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" [(ngModel)]="formData.email">

  <label for="phone">Phone:</label>
  <input type="text" id="phone" name="phone" [(ngModel)]="formData.phone">

  <button type="submit">Submit</button>

  <p>Name: {{ contact.name }}</p>
  <p>Email: {{ contact.email }}</p>
  <p>Phone: {{ contact.phone }}</p>
</form>

在组件类中，您可以将表单数据绑定到模型对象中：

// www.javascriptcn.com code example
import { Component } from '@angular/core';
import { Contact } from './contact'

@Component({
  selector: 'app-form',
  template: `
    <form #myForm="ngForm" (ngSubmit)="onSubmit()">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" [(ngModel)]="formData.name">

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" [(ngModel)]="formData.email">

      <label for="phone">Phone:</label>
      <input type="text" id="phone" name="phone" [(ngModel)]="formData.phone">

      <button type="submit">Submit</button>

      <p>Name: {{ contact.name }}</p>
      <p>Email: {{ contact.email }}</p>
      <p>Phone: {{ contact.phone }}</p>
    </form>
  `
})
export class FormComponent {
  formData: any = {};
  contact: Contact = new Contact();

  onSubmit() {
    this.contact = Object.assign(this.contact, this.formData);
    console.log(this.contact);
  }
}

此代码将在表单中收集用户输入的联系信息，并将其分配给 contact 对象。

深度学习和指导意义

在本文中，我们介绍了如何在 Angular 中使用 TypeScript 处理表单数据，并提供了示例代码和深度学习指导。您已经学习了如何创建模板驱动表单、验证输入数据以及将表单数据绑定到模型对象中。通过将这些知识应用于实践中，您可以更轻松地开发 Angular 应用程序，并避免常见的表单处理错误。

总的来说，Angular 提供了一种强大而灵活的方式来处理表单数据。通过合理使用组件、指令和模型对象，您可以轻松地创建方便易用的表单，并确保输入数据的有效性和安全性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d6090ba941bf7134ba154d

在 Angular 中用 TypeScript 处理表单

Angular 表单简介

模板驱动表单

验证表单数据

绑定到模型对象

深度学习和指导意义

接着读