面试题：Angular中响应式表单与模板驱动表单在数据绑定方面的差异

Question

请阐述在Angular中，响应式表单和模板驱动表单在数据绑定方式上有哪些不同？并举例说明每种表单如何实现简单的数据双向绑定。

Answer 1

数据绑定方式不同

1. 响应式表单：
   • 响应式表单使用Reactive Forms模块，通过FormControl、FormGroup和FormArray等类来创建和管理表单控件状态。数据绑定是通过将这些表单控件对象与模板中的表单元素进行关联实现的。它以一种主动推送数据的方式工作，当表单控件的值发生变化时，会立即更新到相应的数据源中，数据流向相对清晰，是一种基于模型驱动的方式。
2. 模板驱动表单：
   • 模板驱动表单依赖于Angular的模板语法和指令，如ngModel。它是基于模板的声明式方式，数据绑定是隐式的。Angular会根据模板中的指令自动创建和管理表单控件。数据在表单控件和组件属性之间双向流动，通过ngModel指令结合name属性来实现双向数据绑定，它更侧重于模板的声明。

简单数据双向绑定示例

1. 响应式表单示例：
   • 组件代码（.ts文件）：

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

@Component({
  selector: 'app-reactive - form',
  templateUrl: './reactive - form.component.html'
})
export class ReactiveFormComponent {
  username = new FormControl('');
}

• 模板代码（.html文件）：

<input type="text" [formControl]="username">
<p>Username: {{username.value}}</p>

• 在这个例子中，FormControl对象username与<input>元素通过[formControl]指令绑定。当输入框的值改变时，username的值也会同步更新，同时{{username.value}}也会实时显示最新的值，实现了双向数据绑定。

2. 模板驱动表单示例：
   • 组件代码（.ts文件）：

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

@Component({
  selector: 'app - template - driven - form',
  templateUrl: './template - driven - form.component.html'
})
export class TemplateDrivenFormComponent {
  username = '';
}

• 模板代码（.html文件）：

<input type="text" [(ngModel)]="username" name="username">
<p>Username: {{username}}</p>

• 这里通过[(ngModel)]指令将<input>元素的值与组件中的username属性进行双向绑定，name属性是模板驱动表单所必需的。当输入框的值改变时，username属性的值也会改变，同时{{username}}会显示最新的值，实现双向数据绑定。