Question

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

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>

提交表单时，还有其他方法可以禁用提交按钮吗？

Answer 1

如果您想要某种复杂的样式，可以。如果您需要更简单的方法。尝试这样的事情：：

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

Answer 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。这会将按钮设置为禁用状态，并为其应用适当的样式。

表单提交期间禁用按钮

2 个答案: