有没有办法从外部按钮提交Angular 2模型驱动形式(反应形式)？

发布时间：2020-12-17 18:02:46 所属栏目：安全来源：网络整理

导读：我正试图通过标签外的按钮提交我的被动表格.以前,这个表单是模板驱动的,我可以这样做： button (click)="f.ngSubmit.emit()"/button 如果’f’是表格名称. 但是如果我使用这种模型驱动器形式的方法,则会显示错误： TypeError: Cannot read property 'emit' o

我正试图通过标签外的按钮提交我的被动表格.以前,这个表单是模板驱动的,我可以这样做：

<button (click)="f.ngSubmit.emit()"></button>

如果’f’是表格名称.

但是如果我使用这种模型驱动器形式的方法,则会显示错误：

TypeError: Cannot read property 'emit' of undefined

我可以模拟这种行为在表单内部编写隐藏按钮并为外部按钮设置click事件：

<form [formGroup]="loginForm" (ngSubmit)="login()">
   ...
   <button #submit type="submit" style="visibility:hidden"></button>
</form>

<button (click)="submit.click"></button>

它似乎不是最好的方法……还有另一种更好的方法吗？

谢谢.

编辑：

如果我在表单中添加一个id字段,但我认为这不是最好的方法…

<form id="loginF" [formGroup]="loginForm" (ngSubmit)="login()">
   ...
</form>

<button form="loginF" (click)="submit.click"></button>

解决方法

要从表单外部调用提交按钮,您应该使用按钮上的“表单属性”来引用所需表单：

<form [formGroup]="loginForm" (ngSubmit)="login()" id="thatForm">
  ...
</form>    
<button type="submit" form="thatForm"></button>

正如你所看到的,它是普通的旧HTML,而不是一个奇怪的黑客,并且它支持所有优秀的浏览器(也就是除了IE之外的所有人(http://caniuse.com/#feat=form-attribute))

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!