javascript - 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 上留下按钮，我不想这样做。

这是一个堆栈 Blitz :https://stackblitz.com/edit/angular-zh7jcw-mrqaok?file=app%2Fform-field-overview-example.html

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

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

有什么建议吗？

Answer 1

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

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

原答案:

我什至不会传递它。只需将它添加到你的类中:

 @ViewChild('saveButton') button;

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

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

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