html - 提交后如何禁用按钮

Question

我开发了一个表单来添加用户，表单可以工作，但是问题是当连续两次单击按钮提交时，该方法添加两个用户，我希望在直接单击后禁用按钮提交（添加）（我使用 angular 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
        });
    }

}