如何在 Angular 中显示微调器组件时使 div transparent/disabled 2

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;
    }
}

我按照以下 url 来实现此功能：

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

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

Answer 1

使用 HTML5 可以禁用使用 fieldset disabled

包含的所有输入

就这样做...

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

或者，在表单顶部覆盖一个部分不透明的 div，这样就无法访问其元素。

Answer 2

您可以将所有您想要禁用的内容包装在 div 或一个部分中，并使用不透明的 class:

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



</section>

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

<fieldset [disabled]="isRequesting">

如何在 Angular 中显示微调器组件时使 div transparent/disabled 2

How to make the div transparent/disabled when the spinner component is shown in Angular 2

typescript

angular2-forms

angular