feat(material): initial work for ui-material (#534)

.config/build.js

@@ -1,7 +1,8 @@
 const fs = require("fs"),
   packages = [
-    'bootstrap',
     'core',
+    'bootstrap',
+    'material',
   ];
 
 // update `FORMLY-VERSION` in package.json for all sub-packages

.config/publish.js

@@ -2,6 +2,7 @@ const execSync = require('child_process').execSync,
   packages = [
     'core',
     'bootstrap',
+    'material',
   ];
 
 packages.map(package => {

.config/webpack.demo.js

@@ -14,6 +14,7 @@ module.exports = {
     alias: {
       '@ngx-formly/core':  path.join(__dirname, '..', 'src/core'),
       '@ngx-formly/bootstrap':  path.join(__dirname, '..', 'src/ui-bootstrap'),
+      '@ngx-formly/material':  path.join(__dirname, '..', 'src/ui-material'),
     },
   },
   module: {

.config/webpack.test.js

@@ -8,6 +8,7 @@ module.exports = {
     alias: {
       '@ngx-formly/core': path.join(__dirname, '..', 'src/core'),
       '@ngx-formly/bootstrap': path.join(__dirname, '..', 'src/ui-bootstrap'),
+      '@ngx-formly/material': path.join(__dirname, '..', 'src/ui-material'),
     },
   },
   devtool: 'inline-source-map',

README.md

@@ -127,7 +127,10 @@ See the [issues labeled enhancement](https://github.com/formly-js/angular2-forml
 
 ## Supported templates
 
- - [Material2](https://github.com/formly-js/ng-formly/issues/335)
+ - [Material2](https://github.com/formly-js/ng-formly/tree/master/src/ui-material)
+    ```ts
+      import {FormlyMaterialModule} from '@ngx-formly/material';
+    ```
 
  - [Bootstrap](https://github.com/formly-js/ng-formly/tree/master/src/ui-bootstrap)
     ```ts

demo/src/app.component.ts

@@ -46,6 +46,7 @@ export class AppComponent {
       }, {
         type: 'radio',
         key: 'title2',
+        className: 'col-12',
         hide: true,
         templateOptions: {
           options: [{
@@ -60,8 +61,9 @@ export class AppComponent {
         },
       }, {
         fieldGroupClassName: 'row',
+        className: 'col-12',
         fieldGroup: [{
-          className: 'col-md-6',
+          className: 'col-sm-6',
           key: 'email',
           type: 'input',
           templateOptions: {
@@ -83,7 +85,7 @@ export class AppComponent {
             'templateOptions.disabled': '!model.password',
           },
         }, {
-          className: 'col-md-6',
+          className: 'col-sm-6',
           id: 'username',
           key: 'username',
           type: 'input',
@@ -110,7 +112,7 @@ export class AppComponent {
             uniqueUserName: (control: FormControl) => new Promise(resolve => resolve( control.value !== 'paul')),
           },
         }, {
-          className: 'col-md-6',
+          className: 'col-sm-6',
           key: 'password',
           type: 'input',
           templateOptions: {
@@ -125,7 +127,7 @@ export class AppComponent {
             validation: Validators.compose([Validators.required, Validators.maxLength(10), Validators.minLength(2)]),
           },
         }, {
-          className: 'col-md-6',
+          className: 'col-sm-6',
           key: 'confirmPassword',
           type: 'input',
           templateOptions: {
@@ -141,7 +143,7 @@ export class AppComponent {
           className: 'section-label',
           template: '<br/><hr/>',
         }, {
-          className: 'col-md-4',
+          className: 'col-sm-4',
           key: 'select',
           type: 'select',
           templateOptions: {
@@ -156,7 +158,7 @@ export class AppComponent {
             placeholder: 'Select Gender',
           },
         } , {
-          className: 'col-md-4',
+          className: 'col-sm-4',
           key: 'selectSuperHero',
           type: 'select',
           templateOptions: {
@@ -178,12 +180,13 @@ export class AppComponent {
       }, {
         key: 'address',
         fieldGroupClassName: 'row',
+        className: 'col-12',
         wrappers: ['panel'],
         templateOptions: {
           title: 'Address',
         },
         fieldGroup: [{
-          className: 'col-md-6',
+          className: 'col-sm-6',
           type: 'input',
           key: 'street',
           validators: {
@@ -201,7 +204,7 @@ export class AppComponent {
             description: 'Enter a valid US Address',
           },
         }, {
-          className: 'col-md-3',
+          className: 'col-sm-3',
           type: 'input',
           key: 'city',
           templateOptions: {
@@ -220,7 +223,7 @@ export class AppComponent {
             },
           },
         }, {
-          className: 'col-md-3',
+          className: 'col-sm-3',
           type: 'input',
           key: 'zip',
           templateOptions: {
@@ -249,7 +252,7 @@ export class AppComponent {
       }, {
         type: 'multicheckbox',
         key: 'interest',
-        className: 'col-md-6',
+        className: 'col-sm-6',
         templateOptions: {
           disabled: true,
           options: [{
@@ -268,7 +271,7 @@ export class AppComponent {
       }, {
         type: 'multicheckbox',
         key: 'hobbies',
-        className: 'col-md-6',
+        className: 'col-sm-6',
         templateOptions: {
           options: [{
             key: 'sports',
@@ -374,7 +377,7 @@ export class AppComponent {
           },
           fieldGroup: [
             {
-              className: 'col-md-4',
+              className: 'col-sm-4',
               type: 'input',
               key: 'investmentName',
               templateOptions: {
@@ -385,7 +388,7 @@ export class AppComponent {
             {
               type: 'input',
               key: 'investmentDate',
-              className: 'col-xs-4',
+              className: 'col-sm-4',
               optionsTypes: ['dateFormat'],
               templateOptions: {
                 label: 'Date of Investment:',
@@ -397,7 +400,7 @@ export class AppComponent {
             {
               type: 'input',
               key: 'stockIdentifier',
-              className: 'col-md-4',
+              className: 'col-sm-4',
               templateOptions: {
                 label: 'Stock Identifier:',
                 addonRight: {

demo/src/formly/types/repeatedSection.ts

@@ -15,11 +15,11 @@ import * as clonedeep from 'lodash.clonedeep';
         [ngClass]="field.fieldArray.fieldGroupClassName">
       </formly-form>
       <div class="col-md-2">
-        <button class="btn btn-danger" (click)="remove(i)">Remove</button>
+        <button class="btn btn-danger" type="button" (click)="remove(i)">Remove</button>
       </div>
     </div>
     <div style="margin:30px 0;">
-      <button class="btn btn-primary" (click)="add()">Add More Investments</button>
+      <button class="btn btn-primary" type="button" (click)="add()">Add More Investments</button>
     </div>
   `,
 })

package.json

@@ -13,12 +13,15 @@
     "contrib:add": "all-contributors add",
     "contrib:generate": "all-contributors generate",
     "lint": "tslint 'src/**/*.ts' 'demo/**/*.ts'",
+    "lint-fix": "tslint --fix 'src/**/*.ts' 'app/**/*.ts' --type-check -p tsconfig.json",
     "postinstall": "patch --forward node_modules/ng-packagr/lib/steps/ngc.js .config/ng-packagr.patch || true",
     "commit": "npm run build && git-cz",
     "prepublish": "npm run build",
-    "build": "npm run build-core && npm run build-bootstrap && node .config/build.js",
-    "build-core": "ng-packagr -p src/core/ng-package.json",
-    "build-bootstrap": "ng-packagr -p src/ui-bootstrap/ng-package.json",
+    "build": "npm run build:core && npm run build:bootstrap && npm run build:material && node .config/build.js",
+    "build:core": "ng-packagr -p src/core/ng-package.json",
+    "build:bootstrap": "ng-packagr -p src/ui-bootstrap/ng-package.json",
+    "build:material": "ng-packagr -p src/ui-material/ng-package.json",
+    "build-publish": "npm run build && node .config/publish.js",
     "demo": "node_modules/.bin/webpack-dashboard --title ng-formly-demo -- node_modules/.bin/webpack-dev-server --quiet --port 9000 --content-base demo --config .config/webpack.demo.js --open",
     "test": "karma start",
     "test-watch": "karma start --no-single-run --auto-watch"
@@ -50,13 +53,17 @@
     "tslib": "^1.7.1"
   },
   "devDependencies": {
-    "@angular/common": "^4.4.4",
-    "@angular/compiler": "^4.4.4",
-    "@angular/compiler-cli": "^4.4.4",
-    "@angular/core": "^4.4.4",
-    "@angular/forms": "^4.4.4",
-    "@angular/platform-browser": "^4.4.4",
-    "@angular/platform-browser-dynamic": "^4.4.4",
+    "@angular/animations": "^4.4.6",
+    "@angular/cdk": "^2.0.0-beta.12",
+    "@angular/common": "^4.4.6",
+    "@angular/compiler": "^4.4.6",
+    "@angular/compiler-cli": "^4.4.6",
+    "@angular/core": "^4.4.6",
+    "@angular/forms": "^4.4.6",
+    "@angular/http": "^4.4.6",
+    "@angular/material": "^2.0.0-beta.12",
+    "@angular/platform-browser": "^4.4.6",
+    "@angular/platform-browser-dynamic": "^4.4.6",
     "@types/jasmine": "2.6.0",
     "@types/node": "^7.0.22",
     "angular2-template-loader": "^0.6.2",
@@ -84,9 +91,9 @@
     "shx": "^0.2.2",
     "tslint": "^5.7.0",
     "typescript": "^2.5.3",
-    "webpack": "^3.6.0",
+    "webpack": "^3.8.1",
     "webpack-dashboard": "^1.0.0-5",
-    "webpack-dev-server": "^2.9.1",
+    "webpack-dev-server": "^2.9.3",
     "zone.js": "^0.8.18"
   },
   "config": {

src/core/src/components/formly.field.config.ts

@@ -41,7 +41,7 @@ export interface FormlyTemplateOptions {
   type?: string;
   label?: string;
   placeholder?: string;
-  disabled?: Boolean;
+  disabled?: boolean;
   options?: Array<any>;
   rows?: number;
   cols?: number;
@@ -52,7 +52,7 @@ export interface FormlyTemplateOptions {
   minLength?: number;
   maxLength?: number;
   pattern?: string;
-  required?: Boolean;
+  required?: boolean;
   tabindex?: number;
   step?: number;
   focus?: Function;

src/core/src/components/formly.field.ts

@@ -3,11 +3,10 @@ import {
   ViewContainerRef, ViewChild, ComponentRef, Renderer2, ComponentFactoryResolver,
 } from '@angular/core';
 import { FormGroup, FormArray } from '@angular/forms';
-import { FormlyConfig, ManipulatorWrapper, TypeOption } from '../services/formly.config';
+import { FormlyConfig, TypeOption } from '../services/formly.config';
 import { Field } from '../templates/field';
 import { evalExpression } from '../utils';
 import { FormlyFieldConfig, FormlyOptions, FormlyValueChangeEvent } from './formly.field.config';
-import { Subject } from 'rxjs/Subject';
 import { Subscription } from 'rxjs/Subscription';
 import { debounceTime } from 'rxjs/operator/debounceTime';
 import { map } from 'rxjs/operator/map';

src/core/src/services/formly.config.ts

@@ -189,7 +189,7 @@ export interface TypeOption {
   component?: any;
   wrappers?: string[];
   extends?: string;
-  defaultOptions?: any;
+  defaultOptions?: FormlyFieldConfig;
 }
 
 export interface WrapperOption {

src/ui-material/index.ts

@@ -0,0 +1 @@
+export * from './public_api';

src/ui-material/ng-package.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "index.ts",
+      "externals": {
+        "@ngx-formly/core": "@ngx-formly/core",
+        "@angular/material/core": "ng.material.core",
+        "@angular/material/form-field": "ng.material.form-field",
+        "@angular/material/input": "ng.material.input",
+        "@angular/material/radio": "ng.material.radio",
+        "@angular/material/select": "ng.material.select",
+        "@angular/material/checkbox": "ng.material.checkbox"
+      }
+  },
+  "dest": "../../dist/material",
+  "workingDirectory": "../../.ng_build"
+}

src/ui-material/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@ngx-formly/material",
+  "version": "FORMLY-VERSION",
+  "description": "",
+  "license": "MIT",
+  "dependencies": {
+    "tslib": "^1.7.1",
+    "@ngx-formly/core": "FORMLY-VERSION",
+    "@angular/material": "2.0.0-beta.12"
+  }
+}

src/ui-material/public_api.ts

@@ -0,0 +1 @@
+export * from './src/ui-material';

src/ui-material/src/formly.error-state-matcher.ts

@@ -0,0 +1,11 @@
+import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material/core';
+import { Field } from '@ngx-formly/core';
+
+export class FormlyErrorStateMatcher implements ErrorStateMatcher {
+  constructor(private field: Field) {}
+
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    return this.field && this.field.showError;
+  }
+}