Question

我知道可以将组件类中FormGroup的实例链接到“反应形式”模板中的表单，以验证其输入字段。但是，我不知道如何在模板驱动的表单中使用FormGroup。 ngModel和FormGroup有什么区别？

Answer 1

模板驱动的表单：FormGroup

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

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

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

仅当您需要{@ 1}示例中所示的形式时，才没有为表单定义模板引用变量。

模板驱动的表单：ngModel

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

通过使用customer.firstName 并设置ngModel属性，Angular将自动为控件定义name并将其添加到FormControl

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

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