Question

我有一个包含少量字段和提交按钮的表单。只有当表单有效时才会启用提交按钮，当用户单击提交按钮时，它会调用api，在此期间我可以显示微调器组件。以下是我的代码：

HTML：

<div class="col-md-10 col-lg-5" id="mainDiv">
    <form  [formGroup]="userRegisForm">
                <fieldset>
                    <div class="m-l-1">
                        <div class="form-group required">
                            <label for="name" class="col-md-3 control-label">Name:</label>
                            <div class="col-md-6 col-lg-7">
                                <input type="text" class="form-control" id="name" name="Name" formControlName="name"
                                    aria-required="true" required>
                            </div>
                        </div>
                    </div>
                    <div class="m-l-1">
                        <div class="form-group required">
                            <label for="email" class="col-md-3 control-label">email:</label>
                            <div class="col-md-6 col-lg-7">
                                <input type="text" class="form-control" id="email" name="email" formControlName="email"
                                    aria-required="true" required>
                            </div>
                        </div>
                    </div>                    
                    <div class="m-l-2">
                        <div class="form-group">
                            <div class="">
                                <button type="submit"  (click)="submit()" [disabled]="!userRegisForm.valid">Submit</button>
                            </div>
                        </div>
                    </div>
                    <my-spinner [isRunning]="isRequesting"></my-spinner>
                </fieldset>
   </form>
</div>

组件：

'use strict';

import {Component} from 'angular2/core';

import {SpinnerComponent} from '../spinner/spinner';  
import {ApiService} from '../../services/apiService';

@Component({
    selector: 'my-sample-view',
    directives: [SpinnerComponent],
    template: '<my-spinner [isRunning]="isRequesting"></my-spinner>',
})
export class SampleViewComponent {  
    public isRequesting: boolean;
    public items: Array<any>;

    constructor(private apiService: ApiService) {
        this.submit();
    }

    public submit(): void {
        this.isRequesting = true;
        this.apiService.sampleHttpGetRequest()
            .subscribe(
                result => this.items = result, 
                () => this.stopRefreshing(),
                () => this.stopRefreshing());
    }

    private stopRefreshing() {
        this.isRequesting = false;
    }
}

我按照以下网址实现了此功能：

https://manuel-rauber.com/2016/01/05/angular-2-spinner-component/

当请求正在进行但未撤消背景时，将显示微调器。我希望在发生这种情况时禁用表单中的所有字段，包括提交按钮。

Answer 1

使用HTML5，可以禁用使用字段集禁用的所有输入

就这样做......

<form>
<fieldset [disabled]="booleanFormDisabled">
    your inputs u want to disable
</fieldset>
</form>

或者，在表单顶部覆盖部分不透明的div，以便无法访问其元素。

Answer 2

您可以在div或section中包含您想要禁用的所有内容，并使用不透明的类：

<section [class.<your class>]="isRequesting">



</section>

我相信如果你只想禁用表单，你也可以为表单执行此操作：

<fieldset [disabled]="isRequesting">

如何在Angular 2中显示微调器组件时使div透明/禁用

2 个答案: