Angular - отправка формы не срабатывает при нажатии кнопки подтверждения get внутри ng-шаблона

Question

У меня есть шаблон родительского компонента, в котором я определяю базовый html для вкладок и router-outlet для отображения содержимого каждой вкладки. Каждая вкладка имеет свой компонент и связанный маршрут.

У меня будут формы на каждой вкладке, и я хотел, чтобы над вкладками были такие кнопки действий, как сохранить, отменить и т. Для этого я определил ngTemplateOutlet в родительском компоненте и установил для него свойство компонента, которое устанавливается из свойства перенаправленного компонента.

ParentComponent.ts

export class ParentComponent implements OnInit {
  actionButtonTemplateRef: TemplateRef<any>;
  constructor() { }

  ngOnInit() {
  }
  onActivate(componentRef) {
    this.actionButtonTemplateRef= componentRef.actionButtonsTemplate;
  }
}

ParentComponent.html

<div class="panel panel-white panel-height">
   <div class="panel-body">

      <ng-container *ngTemplateOutlet="actionButtonTemplateRef">
      </ng-container>

       <div role="tabpanel">
          <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
              <li role="presentation" routerLinkActive="active">
                <a [routerLink]="['profile']" role="tab">
                  <i class="icon-users"></i> Profile</a>
              </li>

              <li role="presentation" routerLinkActive="active">
                <a [routerLink]="['invite-user']" role="tab">
                  <i class="icon-envelope"></i> Invite Users</a>
              </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content m-t-sm">
              <div role="tabpanel" class="tab-pane active fade in">
                <router-outlet
                (activate)="onActivate($event)"></router-outlet>
              </div>
            </div>
          </div>
       </div>
    </div>

ChildRoutedComponent.ts

export class ChildRoutedComponent {

  model: any;
  @ViewChild('actionButtonsTemplate') actionButtonsTemplate: TemplateRef<any>;

  constructor() { }


  submit(): void {
    //toDO
  }
}

ChildRoutedComponent.html

<form #form="ngForm" class="form-horizontal" (ngSubmit)="submit()">
    <ng-template #actionButtonsTemplate>

        <div class="row">
            <div class="col-md-12">
              <div class="pull-right btn-toolbar">
                <button type="submit" class="btn btn-primary btn-rounded" [disabled]="form.invalid">Save</button>
                <a class="btn btn-default btn-rounded" [routerLink]="['/']">Cancel</a>
              </div>
            </div>
          </div>
        </ng-template>
  <br />
  <div class="row">
    <div class="col-md-10">

      <div class="form-group" [ngClass]="{'has-error' : name.touched && name.errors?.required}">
        <label for="inputEmail3" class="col-sm-2 control-label">Name
            <span>*</span>
        </label>

        <div class="col-sm-10">
          <input class="form-control" placeholder="Name" name="name" required [(ngModel)]="model.name" #name="ngModel" />
        </div>
      </div>

    </div>
  </div>

</form>

Все правильно отображается на интерфейсе пользователя. Кнопка Сохранить корректно переключает свое состояние в зависимости от срока действия формы. Но я вижу одну проблему, когда я нажимаю кнопку сохранения, она не вызывает отправку form. почему?