表单提交期间禁用按钮答案

【问题标题】：Disable button during form submit表单提交期间禁用按钮
【发布时间】：2019-11-27 17:21:56
【问题描述】：

当表单发送到服务器时，我想在提交期间禁用按钮表单。到目前为止，这是我找到的解决方案：

clear() {
    this.count++

    this.formGroup.get('name').reset(null);
     ..........
    if (this.count === 2) {
        this.count = 1;
        document.querySelector('.create-btn').setAttribute('disabled', '');
    }

    }

    isDisabled() {
    document.querySelector('.create-btn').removeAttribute("disabled");
}

HTML 代码：

<form [formGroup]="formGroup" (ngSubmit)="submit()" >
    <div class="form-group" [ngClass]="errorClasses('name')">
        <label>Name</label>
        <input type="text" class="form-control name" formControlName="name" (click)="isDisabled()">
        <div class="help-block form-text with-errors form-control-feedback" *ngIf="controlHasErrors('name')">
            {{controlValidateMessage('name')}}
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <button type="button" class="btn btn-block"
                    [ngClass]="{'btn-success': formGroup.get('enabled').value, 'btn-light': !formGroup.get('enabled').value}"
                    (click)="selectTnx('enabled')">
                        <i class="fa fa-check mr-2"*ngIf="formGroup.get('enabled').value"></i>Enabled
                </button>
            </div>
        </div>
    </div>
</form>

有没有其他方法可以在提交表单时禁用提交按钮？

【问题讨论】：

我认为这个问题的答案可能对您有所帮助。 stackoverflow.com/questions/37159827/…

标签： angular typescript

【解决方案1】：

如果您想要某种复杂的样式，您可以。如果你需要更简单的东西。尝试这样的事情::

HTML
<input [disabled]="sendDisabled" type="button" value="Send">
...
Angular-js-class
sendDisabled = false

【讨论】：

【解决方案2】：

您只需将按钮设置为disabled。

<button type="button" class="btn btn-block" [disabled] ="btnDisabled"
[ngClass]="{'btn-success': formGroup.get('enabled').value, 'btn-light': !formGroup.get('enabled').value}"
(click)="selectTnx('enabled')"><i class="fa fa-check mr-2"
*ngIf="formGroup.get('enabled').value"></i>Enabled</button>

现在点击按钮，您可以简单地在您的组件中设置btnDisabled = true。这会将按钮设置为禁用并对其应用适当的样式。

【讨论】：