Question

我有一个Angular 5表单，我希望有2个提交按钮，一个用于保存更改，一个用于发布。

目前我只是使用（点击）处理程序，但问题是我的验证没有解决

他们调用的不同功能如下：

saveInsight() {

  this.insightService.createInsight(this.insight)
    .subscribe(
      result => {
        self.alertService.success("Insight has been created", "", false, false);
      },
      error => {
        self.alertService.validationError(error.error, 'There was a problem creating your insight', false, false);
      });
}

publishInsight() {
  this.insight.is_Active = true;
  this.saveInsight();
}

在我的HTML中，我称之为：

<form name="form" (ngSubmit)="f.form.valid && saveInsight()" #f="ngForm">

    <input id="heading" heading type="text" required name="heading" [(ngModel)]="insight.heading" #heading="ngModel" type="text" />
    <p *ngIf="f.submitted && !heading.valid" class="text-danger">Title is required</p>

    <button (click)="saveInsight()">Save Changes</button>
    <button (click)="publishInsight()">Publish</button>
</form>

我尝试过添加type =＆＃34;提交＆＃34;按钮，但验证仍然没有。

Answer 1

您正在做的事情似乎与您打算做的不同。如果我是对的，你想根据点击的按钮采取行动，并且只有表格有效;在这种情况下，只需执行此操作：

<form name="form" #f="ngForm">

    <input id="heading" heading type="text" required name="heading" [(ngModel)]="insight.heading" #heading="ngModel" type="text" />
    <p *ngIf="f.submitted && !heading.valid" class="text-danger">Title is required</p>

    <button [disabled]="!f.form.valid" (click)="saveInsight()">Save Changes</button>
    <button [disabled]="!f.form.valid" (click)="publishInsight()">Publish</button>
</form>

请注意，我已经忽略了您在功能中所做的事情，并且只关注基于表单有效性启用/禁用它们的方式。

Angular 5 - 验证不在具有多个提交按钮的表单上触发

1 个答案: