Angular 中有哪些类型的表单？

推荐答案

在 Angular 中，主要有两种类型的表单：

1. 模板驱动表单（Template-Driven Forms）
2. 响应式表单（Reactive Forms）

本题详细解读

模板驱动表单（Template-Driven Forms）

模板驱动表单是基于模板的表单处理方式，主要依赖 Angular 的指令（如 ngModel）来管理表单控件。表单的状态和验证逻辑主要在模板中定义。

• 特点：

  • 表单控件的状态和验证逻辑在模板中定义。
  • 使用 ngModel 指令进行双向数据绑定。
  • 适合简单的表单场景，开发速度快。

• 示例：

  <form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
    <input type="text" name="username" ngModel required>
    <button type="submit">Submit</button>
  </form>

响应式表单（Reactive Forms）

响应式表单是基于代码的表单处理方式，表单的状态和验证逻辑主要在组件类中定义。表单控件是通过 FormControl、FormGroup 和 FormArray 等类来管理的。

• 特点：

  • 表单控件的状态和验证逻辑在组件类中定义。
  • 使用 FormControl、FormGroup 和 FormArray 来管理表单控件。
  • 适合复杂的表单场景，提供更灵活的控制和更好的可测试性。

• 示例：

  -- -------------------- ---- -------
  ------ - ------------ ---------- ---------- - ---- -----------------
  
  ------ ----- ----------- -
    ------- ----------
  
    ------------------- --- ------------ -
      ----------- - ---------------
        --------- ---- --------------------
      ---
    -
  
    ---------- -
      -------------------------------
    -
  -

  <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
    <input type="text" formControlName="username">
    <button type="submit">Submit</button>
  </form>

总结

• 模板驱动表单：适合简单的表单场景，开发速度快，表单逻辑主要在模板中定义。
• 响应式表单：适合复杂的表单场景，提供更灵活的控制和更好的可测试性，表单逻辑主要在组件类中定义。