<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>ng-bootstrap demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script src="https://unpkg.com/core-js@^2.4.1/client/shim.js"></script>
<script src="https://unpkg.com/zone.js@0.8.10/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js@0.8.10/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@^0.1.8/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@^0.19.40/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>loading...</my-app>
</body>
</html>
var ver = {
ng: '4.0.3'
};
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'app': './src',
'@angular/core': 'npm:@angular/core@' + ver.ng + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@' + ver.ng + '/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@' + ver.ng + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@' + ver.ng + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@' + ver.ng + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http@' + ver.ng + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router@' + ver.ng + '/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@' + ver.ng + '/bundles/forms.umd.js',
'rxjs': 'npm:rxjs@^5.0.1',
'typescript': 'npm:typescript@2.1.5/lib/typescript.js',
'@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap@1.0.0-alpha.29/bundles/ng-bootstrap.js'
},
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';
platformBrowserDynamic().bootstrapModule(AppModule);
import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbdButtonsRadio } from './buttons-radio';
@Component({
selector: 'my-app',
template: `
<div class="container-fluid">
<ngbd-buttons-radio></ngbd-buttons-radio>
</div>
`
})
export class App {
}
@NgModule({
imports: [BrowserModule, FormsModule, ReactiveFormsModule, JsonpModule, NgbModule.forRoot()],
declarations: [App, NgbdButtonsRadio]
bootstrap: [App]
})
export class AppModule {}
import {Component} from '@angular/core';
@Component({
selector: 'ngbd-buttons-radio',
templateUrl: 'src/buttons-radio.html'
})
export class NgbdButtonsRadio {
model = 1;
}
Click on the first radio button, then navigate with the right arrow key.
Surprisingly, the focus goes to the third button (Right) to the Foo button
much downer in the form.
<br/>
<div [(ngModel)]="model" ngbRadioGroup name="radioBasic">
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" [value]="1"> Left (pre-checked)
</label>
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" value="middle"> Middle
</label>
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" [value]="false"> Right
</label>
</div>
<input class="form-control" />
<input class="form-control" />
<input class="form-control" />
<input class="form-control" />
<div [(ngModel)]="model2" ngbRadioGroup name="radioBasic2">
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" [value]="1"> Foo
</label>
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" value="middle"> Bar
</label>
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" [value]="false"> Baz
</label>
</div>
<hr>
This doesn't happen with normal radio buttons, because they have a name
attribute:
<div>
<label>
<input name="foo" type="radio" value="1"> Left (pre-checked)
</label>
<label>
<input name="foo" type="radio" value="middle"> Middle
</label>
<label>
<input name="foo" type="radio" value="false"> Right
</label>
</div>
<hr>
<input class="form-control" />
<input class="form-control" />
<input class="form-control" />
<input class="form-control" />
<div>
<label>
<input name="bar" type="radio" value="1"> Foo
</label>
<label>
<input name="bar" type="radio" value="middle"> Bar
</label>
<label>
<input name="bar" type="radio" [value]="false"> Baz
</label>
</div>