typescript - Cómo hacer que el div sea transparente/deshabilitado cuando se muestra el componente spinner en Angular 2

Tengo un formulario con pocos campos y un botón de enviar. El botón de enviar solo está habilitado cuando el formulario es válido y cuando el usuario hace clic en el botón de enviar llama a la API y durante este tiempo puedo mostrar el componente de spinner. El siguiente es mi código:

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>

Componente :

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

Seguí la siguiente URL para implementar esta funcionalidad:

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

El indicador de carga se muestra cuando la solicitud está en curso, pero el fondo no está deshabilitado. Quiero deshabilitar todos los campos del formulario, incluido el botón de enviar, cuando esto suceda.

Respuesta #1

Con HTML5 es posible deshabilitar todos los campos contenidos usando fieldset disabled.

Solo haz esto:

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

Alternativamente, superpone un div parcialmente opaco sobre el formulario para que sus elementos no puedan ser accedidos.

Respuesta #2

Podrías envolver todo lo que quieras deshabilitar en un div o una sección y usar una clase opaca:

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



</section>

Creo que podrías hacer esto también para el formulario si solo quieres que el formulario esté deshabilitado:

<fieldset [disabled]="isRequesting">