Question

我开发了一个添加用户的表单，该表单有效，但是问题是当连续两次单击按钮提交时，该方法添加两个用户，我希望直接单击后禁用按钮提交（添加）（我使用角度5）

HTML代码：

<form [formGroup]="addfrm"> 
       ...  
         ...
       <div style="text-align:center">
           <button class="btn btn-primary" (click)="processAdd()" [disabled]="addfrm.invalid">add</button>
            <button data-dismiss="modal" class="btn btn-default">cancel</button>
        </div>
     </form>

Answer 1

您可以尝试使用 ngForm指令：

<form [formGroup]="addfrm" #myform="ngForm">

  <div style="text-align:center">
    <button class="btn btn-primary" (click)="processAdd()" [disabled]="myform.submitted">add</button>
    <button data-dismiss="modal" class="btn btn-default">cancel</button>
  </div>

</form>

Answer 2

您可以在组件中定义一个字段，并在提交时将其设置为true。

<button class="btn btn-primary" (click)="processAdd()" [disabled]="addfrm.invalid || submitted">add</button>

在组件内

export class MyComponent {
    submitted = false;
    ...

    processAdd() {
        this.submitted = true; 
        this.someService.post(this.addForm).subscribe(result => {
            this.submitted = false; // reset it on response from server
        });
    }

}

提交后如何禁用按钮

2 个答案: