利用模板驱动进行表单的学习与重构

2023-12-17 07:12:43







在 Angular 知识学习（一）中，我们已经讲述了表单的基本知识。但是，那仅仅是最基础的演示。为了让表单功能更加完善，我们需要对之前的表单案例进行重构。

重构后的表单将采用模板驱动表单的方式。模板驱动表单是 Angular 中处理表单的一种常见方式。它使用 ngModel 指令将数据属性绑定到每个表单输入控件。这样，当用户在表单中输入数据时，数据将自动更新到数据属性中。

为了创建一个模板驱动表单，我们需要先创建一个具有初始表单布局的模板。这个模板可以包含各种表单控件，如文本框、单选按钮和复选框。

在创建好模板之后，我们需要使用 ngModel 指令将数据属性绑定到每个表单输入控件。这样，当用户在表单中输入数据时，数据将自动更新到数据属性中。

当用户提交表单时，我们可以使用 Angular 的表单验证功能来验证表单数据是否有效。如果数据有效，则可以将数据提交到服务器。

与响应式表单相比，模板驱动表单更加简单易用。但是，它也有一些缺点。例如，它不能很好地处理嵌套表单。如果需要处理嵌套表单，则需要使用响应式表单。

下面，我们来看一个模板驱动表单的例子。

```html
<form [formGroup]="formGroup">
  <input type="text" formControlName="name">
  <input type="email" formControlName="email">
  <button type="submit">提交</button>
</form>

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

@Component({
  selector: 'my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {

  formGroup: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.formGroup = this.formBuilder.group({
      name: new FormControl(''),
      email: new FormControl('')
    });
  }

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

}