验证不适用于嵌套的模板驱动的Angular形式

Question

我正在使用如下所示的简单表格。它的底部有几个文本框和一个提交按钮。在“提交”按钮之前的表单底部，有一个路由器<app-test></app-test>，其中显示了其他组件中的其他几个问题。

“提交”按钮具有以下验证：如果未填写文本字段，则该按钮将被禁用。对于路由器中出现的问题，此验证工作很好，但即使路由器在<form> ... </form>标记之间，此验证也不适用于其他路由器组件中的问题。请帮助解决问题。

    <form #="ngForm" (ngSubmit) = "onSubmit(myForm.value); myForm.reset()" *ngIf="!isLoading">

      <div class="form-group">
        <div class="form-group" style="margin-bottom: 0">

          <div class ="form-group col-md-6">
            <label>First Name</label>
            <input type="text" class="form-control" placeholder="Provide your first name" name="FirstName" [(ngModel)]="FirstName"
                   required #username = "ngModel">
          </div>

          <div class ="form-group col-md-6">
            <label>Last Name</label>
            <input type="text" class="form-control" placeholder="Provide your last name" name="LastName" [(ngModel)]="LastName"
                   required #username = "ngModel">
          </div>
        </div>
<app-test></app-test>
        <div align="center" class ="form-group">
          <input type="submit" class="btn btn-primary"
                 [disabled]="!myForm.valid">
        </div>
      </div> 
</form>

路由器中的代码如下：（<app-test></app-test>）

    <div class="form-group">
  <div class ="form-group col-md-6">
    <label>test 1 question?</label>
    <input type="text" class="form-control"  name="test1" [(ngModel)]="test1"
           required #quest1 = "ngModel">

  </div>

  <div class ="form-group col-md-6">
    <label>test2 question ?</label>
    <input type="text" class="form-control" name="test2" [(ngModel)]="test2"
           required #quest2 = "ngModel">

  </div>
</div>

因此，当字段First Name，Last Name为空白时，提交按钮将保持禁用状态，而当test 1 question?和test 2 question?为空白时，将不会禁用提交按钮。