<form #settingsForm="ngForm" class="form-horizontal"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title col-xs-4">Map settings</h3> <div class="switch-wrapper col-xs-8"> <bSwitch class="switch" name="enabled" [switch-on-color]="'success'" [switch-inverse]="'inverse'" [switch-off-text]="'Disabled'" [switch-on-text]="'Enabled'" [switch-disabled]="inProgress" [switch-handle-width]="'100'" [switch-label-width]="'20'" [(ngModel)]="settings.enabled"> </bSwitch> </div> </div> <div class="panel-body"> <div [hidden]="!error" class="alert alert-danger" role="alert"><strong>Error: </strong>{{error}}</div> <div class="form-group"> <label class="col-sm-2 control-label" for="googleApiKey">Google maps api key</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="Google api key" [(ngModel)]="settings.googleApiKey" [disabled]="!settings.enabled" name="googleApiKey" id="googleApiKey" required> <span class="help-block">To show the images on a map, <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">google api key</a> is need</span> </div> </div> <button class="btn btn-success pull-right" [disabled]="!settingsForm.form.valid || !changed || inProgress" (click)="save()">Save </button> <button class="btn btn-default pull-right" (click)="reset()">Reset </button> </div> </div> </form>