Building a form with various fields and a submit button, I have set it up so that the submit button is active only when all input fields are valid. When the user clicks on the submit button, an API call is triggered and in the meantime, a loading spinner is displayed. Below is the code snippet:
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 discovered this implementation idea from the following URL:
While the spinner displays during the request process, I noticed that the background remains active. To enhance user experience, I aim to disable all form fields, including the submit button, when the spinner is active.