Angular 的 Easy-Suite for Material Design (以及后续的 ionic)

这是 Easy-Suite 的主页。使用 Material Design 为 Angular 构建而成。

组件抽象，允许轻松构建动态页面。从组件或 HTML 中构建页面。

安装

可以从 npm 安装 Easy-Suite 的最新版本

npm install --save easy-suite

项目状态

Easy Suite 目前处于测试版，并处于积极开发中。在测试版期间，将定期添加新功能，API 将根据用户反馈而演变。

功能状态

"可用" 表示组件或功能已发布并可供使用，但可能仍缺少一些行为或润色。

入门指南

步骤 1：安装 Easy Suite

npm install --save easy-suite

步骤 2：导入组件模块

导入 NgModule

import {EasyModule} from 'easy-suite';

@NgModule({
  ...
  imports: [EasyModule],
  ...
})

步骤 3：Hello World

import { Component} from '@angular/core';
import { EasyForm, EasyFormService, EasyField, EasyNotification, Colors, ButtonTypes } from 'easy-suite';

@Component({
  selector: 'hello-world',
  template: '<easy-form [form]="form"></easy-form>'
})

export class HelloWorldComponent {

  form: EasyForm;

  constructor(public easyFormService: EasyFormService) { 
  	this.form = this.easyFormService.createForm();
  	this.buildForm();
  } 

  buildForm() {
    let container = this.form.addCardContainer("Hello World Title");

    container.addInputField('helloWorldInput', 'Hello World');

    container.addButtonField('Save', () => this.save(), { key:"1", color: Colors.color_primary, type: ButtonTypes.button_fab, icon: 'done' });

    let tabs = this.form.addTabContainer("Tab 1");

    let tab1 = tabs.container;
    tab1.addInputField("Input 1");

    let tab2 = tabs.tabs.addTabToTabContainer("Tab 2");
    tab2.addInputField("Input 2");
  }

  save() {
    let fields = this.form.fields;

    let text = fields.filter(x => x.key == "helloWorldInput")[0].value;

    alert('Saving ' + text)
    }

}

### 运行时验证 字段名称被验证以确保只向集合中添加一个键。

可能会抛出以下异常之一

FieldWithSameKeyAlreadyExistsException 
FieldWithKeyDoesNotExistException
MultipleFieldsWithSameKeyExistException 

### 更多方法

#### 容器

form.addTabContainer(header: string, options: FieldOptions = {})
form.addCardContainer(header: string, options: FieldOptions = {})
form.addModalContainer(header: string, options: FieldOptions = {})

#### 字段

container.addInputField(label: string, options: FieldOptions = {})
container.addAutocompleteField(label: string, options: Array<KeyValue>)
container.addAutocompleteKeyValueField(label: string, options: Array<KeyValue>)
container.addCheckBoxField(label: string)
container.addSelectField(label: string, items: Array<string>
container.addSelectKeyValueField(label: string, items: Array<string>)
container.addButtonField(label: string, action: Function, options: FieldOptions = {})
container.addDatePickerField(label: string)
container.addRadioButtonField(label: string)
container.addCheckboxGroupField(label: string,items:["AA","AB"],{value:["AA"]})
container.addTableField<T>(key: string)

#### 浮动操作按钮 (FABS)

this.form = this.easyFormService.createForm();
this.form.addAction("Save", () => this.save(), { icon: Icons.icon_done, color: Colors.color_primary });
this.form.addAction("Back", () => this.back(), { icon: Icons.icon_arrow_back, color: Colors.color_warn });

#### 模态框

constructor( private easyModal: EasyModalService) {  }

let modal = form.addModalContainer(header: string, options: FieldOptions = {})
modal.addInputField("Test");
modal.addAction("Save", () => alert('save'));
this.easyModal.showModal(modal);

#### 字段选项

export class FieldOptions<T> {
    color?: string
    icon?: string
    type?: string
    format?: string
    showLoader?: boolean
    columnSpan?: number
    value?: T
    key?: string
    label?: string
    required?: boolean
    order?: number
    controlType?: string
    action?: Function
    items?: Array<any>
    xsColumnSize?: string
    smColumnSize?: string
    mdColumnSize?: string
    lgColumnSize?: string
    xlColumnSize?: string
    hide?: boolean;
    maxLength?: number;
    validators?: Validator[]
    updateAction?: Function;
    onEnter?:Function;
}

可用的静态类型

Icons, InputTypes, ButtonTypes, Colors, DateFormats

Usage : 

import { ButtonTypes, Icons, Colors, InputTypes } from 'easy-suite';

tab.addInputField('Test Input', { type: InputTypes.input_type_password });

步骤 4：事件

OnChange

所有字段都公开一个订阅属性，可以订阅以获取字段更改。当字段相互依赖或只需要知道何时有更改时使用此属性。

示例

let field = container.addInputField('Hello World');

field.onChange.subscribe(x=>{
	alert(x.value);
});

OnEnter

示例

let field = container.addInputField('Hello World',{onEnter:()=>alert('Enter Pressed')});

步骤 5 : 处理结果

要自动将 dto 映射到字段集合，请使用 EasyForm 上的 mapFields 方法。NB!!! 确保已分配了 dto 上的属性值，否则属性不可用给 TypeScript

export class TestDto {
  name: string = ''; //Default value assigned.
}

 this.form.mapFields<TestDto>(this.testDto);

要直接将更新绑定到 dto，请在字段选项中使用 updateAction 函数

 container.addInputField('Hello World', {updateAction:(field:EasyField) => foo = field.value;});

表单对象公开一个字段数组。当字段更新时，这个键值数组也会更新。

 let fields = this.form.fields;

 this.field = fields.filter(x => x.key == "helloWorldInput")[0].value;

步骤 7 组件验证器。

导入 EasyValidator

import { EasyValidator } from 'easy-suite';

将验证器添加到字段

container.addInputField('Hello World', {validators: [EasyValidator.Required("Message to display")]});

可用的验证器

EasyValidator.Required("Message to display")
EasyValidator.MinLength(5,"Message to display")
EasyValidator.MaxLength(5,"Message to display")
EasyValidator.Pattern("some regex","Message to display")

预构建验证器

EasyValidator.Email("Optional Message")
EasyValidator.IdentityNumber("Optional Message")
EasyValidator.TelephoneNumber("Optional Message")

在提交表单之前检查字段验证状态

let validationResult = this.form.validateForm();

这将返回一个有效标志和一个无效字段数组。无效字段也将突出显示在网页上。

步骤 7（可选）：用作组件指令。

  <easy-checkbox [placeholder]="field.label" [(value)]="field.value"></easy-checkbox>

  <easy-input [placeholder]="field.label" [(value)]="field.value" (change)="valueChanged()"></easy-input>

  <easy-select [placeholder]="field.label" [(selectedValue)]="field.value" [items]="field.items" (selectedValueChange)="valueChanged()"></easy-select>

  <easy-select-key-value [placeholder]="field.label" [(selectedValue)]="field.value" [items]="field.items" (selectedValueChange)="valueChanged()"></easy-select-key-value>

  <easy-autocomplete [placeholder]="field.label" [items]="field.options"></easy-autocomplete>

  <easy-button [color]="field.color" [icon]="field.icon" [type]="field.type" [displayValue]="field.label" [showLoader]="field.showLoader" (onClicked)="executeAction(field.action)"></easy-button>

  <easy-table [rows]="field.rows" [columns]="field.columns" [actions]="field.actions"></easy-table>

  <easy-date-picker [placeholder]="field.label" [(value)]="field.value"></easy-date-picker>

附录：配置 SystemJS

如果您的项目正在使用 SystemJS 进行模块加载，您需要将 easy-suite 添加到 SystemJS 配置中

System.config({
  // existing configuration options
  map: {
    // ...
    'easy-suite': 'npm:easy-suite/src/',
    'easy-core': 'npm:easy-core/src/'
    // ...
  },

  packages: {
    // ...
      'easy-core': {
        main: 'index.js',
        defaultExtension: 'js'
      },
      'easy-suite': {
        main: 'index.js',
        defaultExtension: 'js'
      }
    // ...
    }

});