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

Question

<form [formGroup]="exampleForm" (ngSubmit)="onSubmit(exampleForm)">
...
</form>

这里我使用的是 Angular 6 响应式表单。

所以我的外部按钮是，

<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>

创建了一个堆栈 Blitz https://stackblitz.com/edit/angular-pwu69r