angular - 我想创建一个包含多个组件的反应式表单，并希望在用户单击提交按钮时验证所有必填字段

Question

我想创建一个具有多个子组件的角度反应形式。

我想一次性验证父表单组件和子表单组件（当用户单击提交按钮时）。

在我目前的情况下，我只能在父表单中显示错误消息，而不能在子组件中显示错误消息，除非我触摸了子组件中的错误消息。

这是 stackblitz 编辑器链接 --> https://stackblitz.com/edit/angular-kenydb

应用链接 --> https://angular-kenydb.stackblitz.io

任何帮助深表感谢。

Answer 1

对子元素也使用相同的表单组，无需创建单独的表单组或子元素。

Answer 2

您可以使用表单组并将所有元素添加到表单组中。

<form [formGroup]="userForm" (ngSubmit)="onFormSubmit()">
  Name: <input formControlName="name"  placeholder="Enter Name">
  Age: <input formControlName="age"  placeholder="Enter Age">
  <button type="submit">Submit</button> 
</form>