Angular如何在表单提交上获取按钮元素

Question

我有一个页面，上面有多个表单。每个表单上都有许多按钮。我想在按下按钮后在按钮上实现加载微调器。当我使用正常的点击事件时，我可以传入按钮：

HTML

<button #cancelButton class="button-with-icon" type="button" *ngIf="hasCancel" mat-raised-button color="warn" [disabled]="isLoading" (click)="clickEvent(cancelButton)">
    <mat-spinner *ngIf="isLoading" style="display: inline-block;" diameter="24"></mat-spinner>
    Cancel
</button>

TS

clickEvent(button: MatButton) {
    console.log(button);
}

在这种情况下，按钮元素被传递，您可以访问它以向按钮添加加载类。

但是，如果您使用提交按钮尝试相同的操作，它会显示为undefined：

HTML

<form (ngSubmit)="save(saveButton)">
    <button #saveButton class="button-with-icon" type="submit" *ngIf="hasSave" mat-raised-button color="primary" [disabled]="isLoading">
        <mat-spinner *ngIf="isLoading" style="display: inline-block;" diameter="24"></mat-spinner>
        Save
    </button>
</form>

TS

save(button: MatButton) {
    console.log(button);
}

在这种情况下，按钮是undefined，因为按钮上的*ngIf 阻止了它进入表单的范围。我可以删除 *ngIf 并隐藏按钮，但这会将按钮留在 DOM 上，我不想这样做。

这里是堆栈闪电战：https://stackblitz.com/edit/angular-zh7jcw-mrqaok?file=app%2Fform-field-overview-example.html

我尝试向保存按钮添加一个额外的点击事件以将按钮设置为加载，但点击事件首先触发并将按钮设置为禁用，然后阻止调用提交事件。

我查看了提交事件，但看不到任何链接回单击按钮的内容。

有什么建议吗？

Answer 1

tl;dr这是我的实际解决方案：https://stackblitz.com/edit/angular-zh7jcw-ythpdb

---

编辑：正如我刚刚注意到的，@AJT_82 很好地解释了 OP 的原始问题与参考元素。所以我现在删除了我之前的答案。

---

但是我会建议以下解决方案，它更适合关注点分离和以角度方式做事，即引入两个新成员@ 987654325@和submitActive，您将能够更灵活地处理表单的不同状态。

您可以在这里看到它的实际效果：https://stackblitz.com/edit/angular-zh7jcw-ythpdb

export class FormFieldOverviewExample {
  cancelActive = false;
  submitActive = false;

  // this is for submit event
  saveEvent(event: Event) {
    // additional logic can be added
    // if(!this.cancelActive) return;

    this.submitActive = true;
    this.cancelActive = false;
  }

  // this is for cancel event
  cancelEvent(event: Event) {
    // additional logic can be added
    // if(!this.submitActive) return;

    this.submitActive = true;
    this.cancelActive = false;
  }

}

<form (ngSubmit)="saveEvent($event)">
  <button  class="button-with-icon"  type="button"  *ngIf="hasCancel"  mat-raised-button color="warn"  [disabled]="cancelActive"  (click)="cancelEvent($event)">
    <mat-spinner *ngIf="cancelActive" class="spinner" diameter="15"></mat-spinner>
    Cancel
  </button>
  <br><br>
  <button class="button-with-icon" type="submit" *ngIf="hasSave" mat-raised-button color="primary" [disabled]="submitActive">
    <mat-spinner *ngIf="submitActive" class="spinner" diameter="15"></mat-spinner>
    Save
  </button>
</form>

这样你也会有更多的游乐场，例如：

<button type="submit" [disabled]="submitActive || cancelActive">...</button>

如果您出于某种原因想要这样做，您可以简单地禁用 submit 按钮而不显示加载动画...

此外，假设您的表单中有一个<input type="text" /> 元素。用户切换到该元素（通过单击或按 Tab 键），完成编辑后按 Enter 键，在这种情况下，浏览器也会自动提交表单；所以这会使你现有的代码结构变得更加复杂。

Answer 2

不要在表单上使用ngSubmit 事件处理程序，而是在保存按钮上使用click 事件处理程序。将类型保留为submit，这样当用户在输入控件上使用Enter 键提交表单时它仍然有效。

<form #formElement="ngForm">
    ...
    <button #saveButton (click)="save(saveButton, formElement)" type="submit" ...>
        <mat-spinner ...></mat-spinner>
        Save
    </button>
</form>

您还可以通过使用对象来跟踪哪个按钮处于加载状态，从而避免将loading 类添加到DOM。工作示例here。这也允许您拥有许多按钮，而不必为每个按钮创建一个固定变量。

class FormFieldOverviewExample {
  
  hasCancel = true;
  hasSave = true;
  isLoading = {};

  saveEvent(event, buttonName, form) {
    console.log(buttonName);
    if(form.valid) {
      this.isLoading[buttonName]=true;
      // ...
    } else {
      this.isLoading[buttonName]=false;
      console.warn("Form not submitted because it contains errors");
    }
  }

  clickEvent(event, buttonName) {
    console.log(buttonName);
    this.isLoading[buttonName]=true;
    // ...
  }
}

form { display: none; }

<form #formElement="ngForm">

  ...

  <button (click)="clickEvent($event, 'cancelButton')" [disabled]="isLoading['cancelButton']" *ngIf="hasCancel" type="button" ...>
    <mat-spinner *ngIf="isLoading['cancelButton']" ...></mat-spinner>
    Cancel
  </button> 
  
  <br><br>
  
  <button (click)="saveEvent($event, 'saveButton', formElement)"  [disabled]="isLoading['saveButton']" *ngIf="hasSave" type="submit" ...>
    <mat-spinner *ngIf="isLoading['saveButton']" ...></mat-spinner>
    Save
  </button>
</form>

Answer 3

这实际上与提交函数无关，而是与角度和结构指令有关。当您应用结构指令（ngFor、ngIf...）时，Angular 的作用是创建一个 ng-template 节点。这意味着，在结构指令范围内定义的模板引用变量仅在该节点中可用。

那么你在这里拥有什么：

<button #saveButton *ngIf="hasSave">
  Save
</button>

表示saveButton 模板引用仅在为按钮创建的ng-template 内部可用，因此在提交函数中不可用。

我们在这里拥有什么：

<button #cancelButton *ngIf="hasCancel" (click)="clickEvent(cancelButton)">
  Cancel
</button>

是点击事件在按钮上，所以cancelButton模板引用变量可用于该事件。

使用hidden 而不是ngIf 就像其他答案中建议的那样，解决了这个问题，因为我们只是......好吧，隐藏元素。

Answer 4

更新我现在了解您的具体问题。问题是按钮上的*ngIf。它打破了参考。将其更改为[hidden]，它应该可以工作。这是更新的 StackBlitz：https://stackblitz.com/edit/angular-zh7jcw-pcuuyv

至于为什么会发生，我认为这很好地描述了这个问题：https://stackoverflow.com/a/36651625/64279

原答案：

我什至不会把它传进去。只需在你的课堂上添加这个：

 @ViewChild('saveButton') button;

然后你可以在你的保存方法中引用它：

save() {
    console.log(this.saveButton);
}

但我还要补充一点，从插值调用函数不是一个好主意，因为它会导致性能问题。相反，您应该订阅一个设置属性的事件，然后在您的视图中引用该属性。这样，该函数仅在事件触发时调用，而不是每次渲染页面时调用。

Answer 5

对于您的情况，您不应将元素传递给函数，然后在其上操作类，而应简单地维护一个用于加载状态的变量。在您的组件中，将其初始化为

loading: boolean = false;

并在您的模板中，将此类绑定为

[class.loading]="loading"

在您的方法中，首先将此属性设置为 true，然后在异步调用完成后设置为 false。同样使用相同的变量将禁用属性设置为

[disabled]="loading"