Angular 模板驱动型表单是什么

Angular 模板驱动型表单（Template-driven Forms）是 Angular 中的一种用于构建表单的方式。它依赖于模板中的 HTML 和 Angular 指令，通过模板来绑定和管理表单控件，而不是在组件中用代码去定义表单逻辑。这种表单方式适合于简单、较小的表单场景。

1. 模板驱动型表单的特点

依赖模板：大部分的表单逻辑在 HTML 模板中定义，使用 Angular 的表单指令（如 ngModel）来双向绑定表单数据。
简洁易懂：与响应式表单相比，模板驱动型表单更直观，适合小型表单开发。
自动创建表单控件：Angular 会自动为表单控件创建 FormControl，开发者无需手动管理。
双向数据绑定：通过 [(ngModel)] 实现表单字段与组件数据的双向绑定。

2. 如何使用模板驱动型表单？

下面是如何在 Angular 中创建和使用模板驱动型表单的基本步骤：

1. 引入 FormsModule

首先，需要在应用的模块中引入 FormsModule。这是模板驱动型表单所依赖的模块。

import {
    
     NgModule } from '@angular/core';
import {
    
     BrowserModule } from '@angular/platform-browser';
import {
    
     FormsModule } from '@angular/forms'; // 引入 FormsModule

import {
    
     AppComponent } from './app.component';

@NgModule({
    
    
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule], // 在 imports 中包含 FormsModule
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
    
    }

2. 创建表单模板

在组件模板中，创建一个表单并使用 ngModel 进行双向数据绑定。

<form (ngSubmit)="onSubmit()" #userForm="ngForm">
  <div>
    <label for="name">Name:</label>
    <input
      type="text"
      id="name"
      name="name"
      [(ngModel)]="user.name"
      #name="ngModel"
      required
    />
    <!-- 显示验证错误信息 -->
    <div *ngIf="name.invalid && name.touched">
      Name is required
    </div>
  </div>

  <div>
    <label for="email">Email:</label>
    <input
      type="email"
      id="email"
      name="email"
      [(ngModel)]="user.email"
      #email="ngModel"
      required
      email
    />
    <!-- 显示验证错误信息 -->
    <div *ngIf="email.invalid && email.touched">
      A valid email is required
    </div>
  </div>

  <button type="submit" [disabled]="userForm.invalid">Submit</button>
</form>

在这个表单中：

使用 [(ngModel)] 实现双向数据绑定。
使用 #userForm=“ngForm” 引用表单，并将其绑定到模板上下文中。
添加 required 和 email 来执行简单的验证。
通过 ngSubmit 事件处理表单提交。

3. 在组件中处理表单数据

在组件的 TypeScript 文件中，处理表单提交数据。

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

@Component({
    
    
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
    
    
  user = {
    
    
    name: '',
    email: ''
  };

  onSubmit() {
    
    
    console.log('Form submitted!', this.user);
  }
}

3. 模板驱动型表单的验证

在模板驱动型表单中，可以通过 Angular 提供的内置验证指令（如 required、email 等）和 ngModel 的状态来进行表单验证。常见的验证状态包括：

valid: 控件是否有效。
invalid: 控件是否无效。
touched: 控件是否被访问过。
untouched: 控件是否未被访问。
pristine: 控件是否未被修改。
dirty: 控件是否被修改过。
例如，利用这些状态显示验证错误信息：

<div *ngIf="name.invalid && name.touched">
  Name is required.
</div>
<div *ngIf="email.invalid && email.touched">
  A valid email is required.
</div>

4. 使用模板变量和表单状态

Angular 提供了一些模板变量，用来控制表单的状态。常见的模板变量包括：

ngForm: 表单的整体状态。
ngModel: 表单控件的状态。
可以使用这些变量来实现动态的表单验证提示、控制按钮的启用禁用等功能。例如，禁用“提交”按钮直到表单有效：

<button type="submit" [disabled]="userForm.invalid">Submit</button>

5. 模板驱动型表单和响应式表单的区别

在这里插入图片描述

总结

模板驱动型表单是 Angular 提供的一种简洁方式来构建表单，主要适用于较小、简单的表单场景。它通过模板指令进行数据绑定和验证，表单逻辑主要在模板中定义。如果你构建的是较小型表单，这种方法能让开发变得更加轻松便捷。然而，对于更复杂的表单或需要更高的灵活性时，通常推荐使用响应式表单。