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

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，以便无法访问其元素。