angular - Angular 6 - 从表单外部验证和提交表单
问题描述
<form [formGroup]="exampleForm" (ngSubmit)="onSubmit(exampleForm)">
...
</form>
在这里,我使用Angular 6 Reactive 表单。
所以我的外部按钮是,
<button mat-icon-button type="submit">
<img src="../../../../../../assets/images/icon/save-1.svg"/>
</button>
所以我想验证表格并提交。如果有验证错误,保存按钮应该被禁用。
这是 onSubmit() 实现。
onSubmit(form : FormGroup){
this.shareObjectRequest = this.shareObjectForm.value;
if (form.value.id != null) {
this.reportShareObjectService.put(this.reportId, this.shareObjectRequest).subscribe(
result => {
},
err => {
console.log("Error Occured." + JSON.stringify(err));
});
}
else {
this.reportShareObjectService.create(this.reportId, this.shareObjectRequest).subscribe(
result => {
},
err => {
console.log("Error Occured" + JSON.stringify(err));
});
}
}
解决方案
这可以以 HTML5 形式实现。
<form id="myform" [formGroup]="registerForm" (ngSubmit)="onSubmit()">
.......
</form>
<div class="form-group">
<button type="submit" class="btn btn-primary" form="myform">Register</button>
</div>
推荐阅读
- c# - 在 c# 中带有数组的 null ReferenceException
- loops - 发生错误时循环的正确方法是什么
- shopify - 禁用或删除客户帐户
- azure-devops - 无法在本地或远程找到“开发”或“主”分支。- 语义 gitversion
- c - 可以在块范围内定义变量“EL_adv”[MISRA 2012 Rule 8.9,advisory] | pclint 9003 和 pclint 9075
- android - 这里 SDK Android 在布局更改时调整大小
- ios - SFSafariViewController 没有带有自定义条形颜色的暗模式
- reactjs - React - 带有输入变量的 Apollo 客户端查询
- python - pyplot:为图像图定义自定义颜色图,将颜色分配给某个值
- r - 在基本函数 barplot() 中自定义 Barplot