角形包裹在组件周围

Question

我有一个类似的场景

  

我需要一个包裹组件的表单

和HTML结构应如下所示：

<form #f="ngForm" (ngSubmit)="clickForm(f)">
   <app-component-1></app-component-1>
   <app-component-2></app-component-2>
   <button type="submit">Submit</button>
</form>

每个组件都有特定的输入集，整个结构如下所示：

<form #f="ngForm" (ngSubmit)="clickForm(f)">
   <app-component-1>
        <input type="text" name="name" #name="ngModel" ngModel required />
        ..so on upto 10 inputs
   </app-component-1>
   <app-component-2>
        <input type="text" name="name2" #name2="ngModel" ngModel required />
        ..so on upto 10 inputs
   </app-component-2>
   <button type="submit">Submit</button>
</form>

但表格验证不起作用。和表格状态我们总是有效的。 有什么建议吗？