Angular 在表单提交期间禁用按钮

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

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>

名称
{{controlValidateMessage（'name'）}
启用

---

提交表单时，是否有其他方法可以禁用“提交”按钮？

如果需要某种复杂的样式，请单击“确定”。如果你需要更简单的东西。试着这样做：：

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

HTML
...
角js类
sendDisabled=false

您只需将按钮设置为禁用

<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

。这会将按钮设置为禁用，并对其应用适当的样式。

我认为此问题的答案可能会对您有所帮助。