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

Question

I have a form with few fields and a submit button. The submit button is enabled only when the form is valid and when the user clicks on the submit button it calls the api and during this time I am able to shown the spinner component. The following is my code:

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>

Component:

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

I followed the following url to implement this functionality:

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

The spinner is shown when the request is in progress but the background is not disbaled. I want to disable all the fields in the form including the submit button when this happens.

Answer 1

With HTML5 it's possible to disable all inputs contained using fieldset disabled.

Just do this:

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

Alternatively, overlay a partially opaque div on top of the form so that its elements cannot be accessed.