我正在尝试通过标签外的按钮提交我的响应式(Reactive)表单。以前,这个表单是模板驱动的,我可以这样做:
<button (click)="f.ngSubmit.emit()"></button>
如果 'f' 是表单名称。
但是如果我将这种方法与模型驱动形式一起使用,则会显示错误:
TypeError: Cannot read property 'emit' of undefined
我可以模拟这种行为,在表单内编写一个隐藏按钮并为外部按钮设置点击事件:
<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,不是奇怪的 hack,它支持所有优秀的浏览器(也就是除 IE ( http://caniuse.com/#feat=form-attribute ) 之外的所有浏览器
关于angular - 有没有办法从外部按钮提交 Angular 2 模型驱动的表单(响应式(Reactive)表单)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40880470/