Angular 6 - 从表单外部验证并提交表单

Question

<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));
    });
  }
}

Answer 1

这可以通过 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>

创建了 stackblitz https://stackblitz.com/edit/angular-pwu69r