Angular - Form submission does not trigger when su

问题:

I have a parent component template where I define base html for tabs and router-outlet for rendering each tab content. Each tab has its component and associated route defined.

I will have forms in each tab and I wanted to have the action buttons like save, cancel etc above the tabs. For this, I defined ngTemplateOutlet in parent component and set it to component property which get set from routed component property.

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>

Everything correctly renders on ui. Save button correctly toggle its state based on the form validity. But I see one issue, when I hit save button it does not trigger the form submission. why?