Valla Valla - 16 days ago 14
TypeScript Question

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

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

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

just do this ...

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

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