如何在提交按钮中调用函数答案

【问题标题】：How call a function in an subimit button如何在提交按钮中调用函数
【发布时间】：2022-07-07 23:36:06
【问题描述】：

我有这个功能可以隐藏和显示一个div

Aoba(){
    if(this.fill == false){
      return this.fill = true
    }else if(this.fill == true){
      return this.fill = false
    }
    return console.log(this.fill)
  }

它在我的过滤器按钮中工作，但是当我单击过滤器时我需要再次使用它但它是一个提交按钮，当我将功能放在那里时，提交不起作用。

 <div class="col-6">
   <button type="submit" (click)="Aoba()" class="btn btn-primary-color w-100">{{'Filtrar' | translate}}</button>
 </div>

【问题讨论】：

只使用 Aoba(){ return this.fill = !this.fill}

标签： javascript html css angular typescript

【解决方案1】：

使用onclick属性指定要调用的函数

function HandleClick() {
  alert("I've been clicked");
}

&lt;button onclick="HandleClick()"&gt;Click me!&lt;/button&gt;

【讨论】：

【解决方案2】：

HTML

<form [formGroup]="XXXXX" (ngSubmit)="onSubmit()">
 <button type="submit">Continuer</button>
</form>

onSubmit(): {

}

【讨论】：

【解决方案3】：

首先，

return this.fill = true

和刚才一样

return;

因为 this.fill = true 不返回值。所以我会省略 return 关键字。

其次，无论 this.fill 是什么，您的 console.log 都不会被击中，因为您在到达它之前就返回了。

你也不需要第二个 if，因为 this.fill 是布尔值，如果它不是真的，它就是假的。没有其他选择。如果它不是一个具体的布尔值，那么忽略这一段，尽管我强烈建议你将它转换为特定的东西。

第三，如果函数返回false，我相信它会停止表单提交。它可能根本不适用于（单击）处理程序。我不记得了，也没有时间重新创建您的测试用例（为此使用 StackBlitz）。

我要做的是使用响应式表单，并以代码形式提交。 https://angular.io/guide/reactive-forms

希望对您有所帮助。 :)

【讨论】：