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

Question

我知道FormGroup组件类中的实例可以链接到响应式表单中模板中的表单以验证其输入字段。但是我不明白我们如何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

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

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

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