当在ng-模板中单击Submit按钮时，提交不会触发
当在ng-模板中单击Submit按钮时，提交不会触发
提问于 2018-08-13 06:23:21
我有一个父组件模板，其中我为制表符定义了基本html，为每个选项卡内容定义了路由器出口。每个选项卡都定义了其组件和相关路由。
我将在每个选项卡中的表单，我想有行动按钮，如保存，取消等上面的选项卡。为此，我定义了ngTemplateOutlet在父组件中，并将其设置为从路由组件属性设置的Component属性。
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>在UI上正确地呈现所有内容。保存按钮根据表单有效性正确切换其状态。但是我看到了一个问题，当我按下“保存”按钮时，它不会触发提交，为什么？
回答 1
Stack Overflow用户
发布于 2018-08-13 15:51:53
你可以这样使用它：
<form id="myForm">
</form>
<input form="myForm" />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100005966
复制相关文章
相似问题
腾讯云开发者
