如何正确使用角度5中的表单元素？

Question

我有一个带有表单的组件，此表单有一个子组件，其中包括 所有输入标签，验证消息等。

表单的主模板：

<form (ngSubmit)="saveTrip(tripDirective)"  #tripDirective="ngForm" novalidate> 
    <div class="form_box">
    <div class="my_form">               
        <section class="npc_box active">        
            <trip1 *ngIf="tripObj" [trip]="tripObj?.trip"></trip1>
        </section>                                                                  
    </div>
    <div class="np_box">
        <button class="next_step">Continue<i></i></button>      
    </div>
    </div>
</form>

您可以在trip1上方看到子元素。现在我已经提交 主要组件（父组件）中的代码：

  saveTrip(tripDirective:FormGroupDirective) {        
    console.log(tripDirective.value)
    }

我在控制台中得到空列表。 我使用child元素作为输入的原因是我有trip1和 行程2。 在一页上，trip1和trip2在长页中属于一种形式。 在另一页上有foreach的一种形式，表示两个单独的页面。

是否有更好，更优雅的解决方案，或者我应该将输入项复制并粘贴到所有页面（重复代码）。 谢谢！