<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://unpkg.com/zone.js@0.6.26/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<formly-demo-hello-app>
loading...
</formly-demo-hello-app>
</body>
</html>
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}
.c-select {
display: block;
width: 100%;
}
/* Checkbox Toggle */
.checkbox-toggle {
margin: 0;
padding: 0;
}
.checkbox-toggle input[type="checkbox"] {
display: none;
}
.checkbox-toggle input[type="checkbox"]:checked + label {
border-color: #0275D8;
background: #0275D8;
box-shadow: inset 0 0 0 20px #0275D8;
}
.checkbox-toggle input[type="checkbox"]:checked + label.toggle-alert {
border-color: #f10000;
background: #f10000;
box-shadow: inset 0 0 0 20px #f10000;
}
.checkbox-toggle label {
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
display: inline-block;
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: #ECEEEF;
box-shadow: inset 0 0 0 0 #0275D8;
}
.checkbox-toggle label div {
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
background: white;
width: 30px;
height: 30px;
border-radius: 50%;
}
.checkbox-toggle--large label div {
width: 41px;
height: 41px;
}
.checkbox-toggle label:hover, .checkbox-toggle label > div:hover {
cursor: pointer;
}
.checkbox-toggle input[type="checkbox"]:checked + label > div {
margin-left: 36px;
}
.checkbox-toggle--large input[type="checkbox"]:checked + label > div {
margin-left: 55px;
}
.checkbox-toggle label {
border: 2px solid #ECEEEF;
border-radius: 42px;
height: 34px;
width: 70px;
}
.checkbox-toggle--large label {
width: 100px;
height: 45px;
}
### Angular2 Starter Plunker - Typescript - RC.0
A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, http, pipes, and DI usage.
For opening
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
emitDecoratorMetadata: true
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/core/testing': 'npm:@angular/core/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router/bundles/router-testing.umd.js',
'ng-formly': 'npm:ng-formly/bundles/ng-formly.umd.min.js',
'lodash': 'npm:lodash@4.17.4',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.0.2/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
lodash: {
main: 'lodash.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
//main entry point
import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {FormlyDemoModule} from './app';
enableProdMode();
platformBrowserDynamic().bootstrapModule(FormlyDemoModule);
// polyfills
// import 'core-js/es6';
// import 'core-js/es7/reflect';
// import 'zone.js/dist/zone';
import { NgModule, Component, enableProdMode } from '@angular/core';
import { FormsModule, ReactiveFormsModule, Validators, FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { FormlyModule, FormlyFieldConfig, FormlyBootstrapModule } from 'ng-formly';
import { FormlyFieldMultiCheckbox } from 'src/multicheckbox';
@Component({
selector: 'formly-demo-hello-app',
templateUrl: './template.html',
})
export class HelloApp {
form: FormGroup;
author: any;
model: any;
options: any;
private userFields: Array<FormlyFieldConfig> = [];
constructor(fb: FormBuilder) {
this.form = fb.group({});
this.author = {
name: 'Tony Franzese',
url: 'https://www.github.com/franzeal',
};
this.fields = [
{
key: 'interest',
type: 'multicheckbox',
templateOptions: {
label: 'Interest',
options: []
},
lifecycle: {
onInit: function() {
let field = this;
setTimeout(() => {
const options = [
{
key: 'sports',
value: 'Sports'
},
{
key: 'movies',
value: 'Movies'
},
{
key: 'others',
value: 'Others'
}
];
// Produces the issue
// field.to.options = options;
// Workaround
field.setOptions(options);
}, 1000);
}
}
}
];
this.model = {
test1: 'foo',
test2: 'bar'
};
this.options = {
formState: {
readOnly: false,
},
};
}
console(data) {
console.log(data);
}
toggleReadOnly() {
this.options.formState.readOnly = !this.options.formState.readOnly;
}
}
@NgModule({
declarations: [
HelloApp,
FormlyFieldMultiCheckbox
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
FormlyModule.forRoot({
types: [{
name: 'multicheckbox', component: FormlyFieldMultiCheckbox
}]
}),
FormlyBootstrapModule
],
bootstrap: [HelloApp],
})
export class FormlyDemoModule {
}
<div class="container">
<h1>ng-formly example: async multicheckbox options</h1>
<p>This is an example of async multicheckbox options.</p>
<hr>
<form class="formly" role="form" novalidate [formGroup]="form">
<formly-form [model]="model" [fields]="fields" [form]="form" [options]="options">
</formly-form>
</form>
<hr>
<strong>Model:</strong>
<pre>{{model | json}}</pre>
<br>
<strong>Form State:</strong>
<pre>{{options.formState | json}}</pre>
<hr>
<button (click)="toggleReadOnly()" class="btn btn-success">Toggle Read-Only</button>
<div style="margin-top:30px">
<small>
This is an example for the
<a href="https://formly-js.github.io/ng2-formly">ng-formly</a>
project made with ♥ by
<strong>
<span *ngIf="!author.name || !author.url">
{{author.name || 'anonymous'}}
</span>
<a *ngIf=" author.url" href="{{author.url}}">
{{author.name}}
</a>
</strong>
</small>
</div>
</div>
import { Component } from '@angular/core';
import { FormGroup, FormControl, AbstractControl } from '@angular/forms';
import { FieldType, FormlyFieldConfig } from 'ng-formly';
@Component({
selector: 'formly-field-multicheckbox',
template: `
<div *ngFor="let option of to.options" class="checkbox">
<label class="custom-control custom-checkbox">
<input type="checkbox" [value]="option.value" [formControl]="formControl.get(option.key)"
[formlyAttributes]="field" class="custom-control-input">
{{ option.value }}
<span class="custom-control-indicator"></span>
</label>
</div>
`,
})
export class FormlyFieldMultiCheckbox extends FieldType {
static createControl(model: any, field: FormlyFieldConfig): AbstractControl {
let controlGroupConfig = field.templateOptions.options.reduce((previous, option) => {
previous[option.key] = new FormControl(model ? model[option.key] : undefined);
return previous;
}, {});
return new FormGroup(
controlGroupConfig,
field.validators ? field.validators.validation : undefined,
field.asyncValidators ? field.asyncValidators.validation : undefined,
);
}
public setOptions(options: { key: string, value: any }[]): void {
const formGroup = this.formControl as FormGroup;
for (const key in formGroup.controls) {
formGroup.removeControl(key);
}
if (options) {
for (const option of options) {
formGroup.addControl(option.key, new FormControl(this.model ? this.model[option.key] : undefined));
}
}
this.to.options = options || [];
}
}