<!DOCTYPE html>
<html>
<head>
<title>Angular Material Plunker</title>
<!-- Load common libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.1.6/typescript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.7.2/zone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script>
<!-- Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System
.import('main.ts')
.catch(console.error.bind(console));
</script>
<!-- Load the Angular Material stylesheet -->
<link href="https://rawgit.com/angular/material2-builds/master/prebuilt-themes/indigo-pink.css" rel="stylesheet">
<style>body { font-family: Roboto, Arial, sans-serif; margin: 0 }</style>
</head>
<body class="mat-app-background">
<material-app>Loading the Angular Material App...</material-app>
</body>
</html>
<!--
Copyright 2017 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
import {Component, OnInit, VERSION as aVersion, ChangeDetectorRef} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {VERSION as mVersion} from '@angular/material';
import {AbstractControl, FormArray, FormBuilder, FormControl, FormGroup, ValidationErrors} from '@angular/forms';
@Component({
selector: 'material-app',
templateUrl: 'app.component.html'
})
export class AppComponent implements OnInit {
addForm = new FormGroup('')
chips: any[] = [];
constructor(private _changeDetectorRef: ChangeDetectorRef,
fb: FormBuilder) {
this.addForm = fb.group({
members: ['', () => ({'bad':true})],
});
}
}
/*
Copyright 2017 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
<mat-toolbar color="primary">
Angular Material 2 App
</mat-toolbar>
<div style="padding: 7px">
<p>
<form [formGroup]="addForm">
<mat-form-field>
<mat-chip-list #chipList1 formControlName="members">
<mat-chip *ngFor="let c of chips">
{{c.text}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input matInput type="text" [matChipInputFor]="chipList1" placeholder="Input with Chip List and Autocomplete" />
</mat-chip-list>
<mat-error>a big error</mat-error>
</mat-form-field>
<button type="submit">Submit</button>
</form>
<p style="max-width: 400px">
mat-form-field mat-error is not shown on submit. Submit marks
the input as invalid, but does not show the error message until user
touches the form.
</p>
</div>
<!--
Copyright 2017 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
/** Add Transpiler for Typescript */
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
packages: {
'.': {
defaultExtension: 'ts'
},
'vendor': {
defaultExtension: 'js'
}
}
});
System.config({
map: {
'main': 'main.js',
// Angular specific mappings.
'@angular/core': 'https://unpkg.com/@angular/core/bundles/core.umd.js',
'@angular/common': 'https://unpkg.com/@angular/common/bundles/common.umd.js',
'@angular/common/http': 'https://unpkg.com/@angular/common/bundles/common-http.umd.js',
'@angular/compiler': 'https://unpkg.com/@angular/compiler/bundles/compiler.umd.js',
'@angular/animations': "https://unpkg.com/@angular/animations/bundles/animations.umd.js",
'@angular/animations/browser': 'https://unpkg.com/@angular/animations/bundles/animations-browser.umd.js',
'@angular/http': 'https://unpkg.com/@angular/http/bundles/http.umd.js',
'@angular/forms': 'https://unpkg.com/@angular/forms/bundles/forms.umd.js',
'@angular/router': 'https://unpkg.com/@angular/router/bundles/router.umd.js',
'@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser/animations': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser-animations.umd.js',
'@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/material': 'https://rawgit.com/angular/material2-builds/master/bundles/material.umd.js',
'@angular/cdk': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk.umd.js',
// CDK Secondary entry points
'@angular/cdk/a11y': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-a11y.umd.js',
'@angular/cdk/accordion': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-accordion.umd.js',
'@angular/cdk/bidi': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-bidi.umd.js',
'@angular/cdk/coercion': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-coercion.umd.js',
'@angular/cdk/keycodes': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-keycodes.umd.js',
'@angular/cdk/observers': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-observers.umd.js',
'@angular/cdk/platform': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-platform.umd.js',
'@angular/cdk/portal': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-portal.umd.js',
'@angular/cdk/rxjs': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-rxjs.umd.js',
'@angular/cdk/table': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-table.umd.js',
'@angular/cdk/testing': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-testing.umd.js',
'@angular/cdk/overlay': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-overlay.umd.js',
'@angular/cdk/scrolling': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-scrolling.umd.js',
'@angular/cdk/collections': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-collections.umd.js',
'@angular/cdk/stepper': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-stepper.umd.js',
'@angular/cdk/layout': 'https://rawgit.com/angular/cdk-builds/master/bundles/cdk-layout.umd.js',
// Third party libraries
'tslib': 'https://unpkg.com/tslib@1.7.1',
'rxjs': 'https://unpkg.com/rxjs@5.5.2',
},
packages: {
// Thirdparty barrels.
'rxjs': { main: 'index' },
'rxjs/operators': {main: 'index'},
}
});
/*
Copyright 2017 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {HttpClientModule} from '@angular/common/http';
import {AppComponent} from './app.component';
import {CdkTableModule} from '@angular/cdk/table'
import {OverlayModule} from '@angular/cdk/overlay';
import {ReactiveFormsModule} from '@angular/forms';
import {
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatSortModule,
MatPaginatorModule
} from '@angular/material';
/**
* NgModule that includes all Material modules that are required to serve
* the Plunker.
*/
@NgModule({
exports: [
// CDk
CdkTableModule,
OverlayModule,
// Material
MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSlideToggleModule,
MatSliderModule,
MatSnackBarModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
MatNativeDateModule,
MatSortModule,
MatPaginatorModule,
ReactiveFormsModule
]
})
export class PlunkerMaterialModule {}
@NgModule({
imports: [
BrowserModule,
CommonModule,
HttpClientModule,
PlunkerMaterialModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: []
})
export class PlunkerAppModule {}
platformBrowserDynamic().bootstrapModule(PlunkerAppModule);
/*
Copyright 2017 Google LLC. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/