模板驱动表单中如何使用 FormGroup 指令？

Question

我知道组件 class 中 FormGroup 的实例可以链接到 Reactive Forms 模板中的表单以验证其输入字段。但是我不知道我们如何在模板驱动的表单中使用 FormGroup 。 ngModel 和 FormGroup 有什么区别？

Answer 1

模板驱动的表单：FormGroup

在模板驱动的表单中，当您在应用程序中使用 <form> 标签时，Angular 会自动绑定到 FormGroup 指令。

如图所示，您可以使用模板引用变量（用 # 表示）来获取对 FormGroup 的引用。这样您就可以访问表单状态，例如有效性状态，这样您就可以执行诸如禁用“保存”按钮之类的操作，直到值有效为止。

 <button type="submit"
         [disabled]="!signupForm.valid">
   Save
  </button>

您没有为表单定义模板引用变量...只有在您需要时才需要它，如上面的 button 示例所示。

模板驱动表单：ngModel

您使用 ngModel 将表单上的 输入元素 与属性双向绑定在组件中。在下面的示例中，我们将 input 元素绑定到组件中的 customer.firstName 属性。

通过使用 ngModel 和设置 name 属性，Angular 将自动为控件定义一个 FormControl 和将其添加到 FormGroup

这里我们可以再次使用模板引用变量（用 # 表示）来引用 FormControl 并访问控件的状态，例如触摸或脏或验证错误。

这通常用于显示验证错误消息，如下所示：

<span *ngIf="firstNameVar.errors">
  Please enter your first name.
</span>

How is FormGroup directive used in template driven forms?