ngx inline editor

本机UI内联编辑Angular（版本4+）组件（演示）

跟着我收到有关新版本的通知。

NGX-Inline-编辑器是一个角度（版本4+）的库，可让您创建可编辑的元素。这种技术也称为点击编辑或现场编辑。它基于在Angularjs中开发的Angular-Xededist的思想。

依赖性

基本上，它不取决于Angular4本身以外的任何库。对于主题，您可能需要包括Twitter Bootstrap CSS。

Angular 4+版本

Angular 4现在稳定。因此，如果使用此LIB遇到错误，请确保您的Angular版本兼容。用于开发此lib的当前版本是Angular4 ^4.0.0 。

控件和功能

• 文本
• Textarea
• 选择
• 复选框
• 收音机
• 日期
• 时间
• DateTime
• HTML5输入
  • 图案
  • 数字
  • 范围
• 打字
• UI选择
• 复杂形式
• 可编辑的行
• 可编辑的专栏
• 可编辑的桌子
• 主题

快速开始

1. 安装NGX内线编辑器的推荐方法是使用以下命令通过NPM软件包管理器：

npm i @qontu/ngx-inline-editor --save

2. 包括基本主题或配置自己的样式，该样式处于以下路径中：

dist/themes/bootstrap.css

3. 在您的项目中包括Twitter引导程序和Fontawesome。

用法

角（4+）及以后

导入InlineEditorModule到您的应用程序模块中：

 import { InlineEditorModule } from '@qontu/ngx-inline-editor' ;

@ NgModule ( {
  imports : [
    InlineEditorModule
  ]
} )

这使得所有@qontu/ngx-inline-editor组件可用于应用程序组件。

简单示例

您可以在这里找到一个完整的示例

 import { Component } from '@angular/core' ;

@ Component ( {
    selector : 'my-component' ,
    template : `
    <div>
        <inline-editor type="text" [(ngModel)]="editableText" (onSave)="saveEditable($event)" name="editableText1" size="8"></inline-editor>
    </div>
    <div>
        <inline-editor type="password" [(ngModel)]="editablePassword" (onSave)="saveEditable($event)"></inline-editor>
    </div>
    <div>
        <inline-editor type="textarea" [(ngModel)]="editableTextArea" (onSave)="saveEditable($event)"> </inline-editor>
    </div>
    <div>
        <inline-editor type="select" [(ngModel)]="editableSelect" (onSave)="saveEditable($event)" [options]="editableSelectOptions"
        value="valor"></inline-editor>
  </div>`
} )
export class MyComponent {
  title = 'My component!' ;

  editableText = 'myText' ;
  editablePassword = 'myPassword' ;
  editableTextArea = 'Text in text area' ;
  editableSelect = 2 ;
  editableSelectOptions = [
    { value : 1 , text : 'status1' } ,
    { value : 2 , text : 'status2' } ,
    { value : 3 , text : 'status3' } ,
    { value : 4 , text : 'status4' }
  ] ;

  saveEditable ( value ) {
    //call to http service
    console . log ( 'http.service: ' + value ) ;
  } 

API

内联迪迪派

文本

 < inline-editor
        type =" text "
        [(ngModel)] =" editableText "
        (onSave) =" saveEditable($event) "
        name =" editableText1 "
        size =" 8 "
        disabled =" true "
        min =" 1 "
        max =" 8 "
        pattern =" ^[a-zA-Z]{1,3} "
        (onError) =" myHandleError() " > </ inline-editor >

• type [ string ]指定要显示的类型<input>元素。
• 每当通过单击“ event handler ”按钮保存表单时，指定的表达式将被onSave 。 $event参数将是输入发送的值返回。
• 每当通过单击“保存event handler按钮保存表单并引起错误时，指定的onError将被调用（例如：该值不在min和max之间）。
• name [ string ]定义了<input>元素的名称。默认值undefined 。
• size [ number ]定义<input>元素的字符中的宽度。默认值为8 。
• disabled [ boolean ]如果设置为true ，则禁用的输入元素是无法使用且无法使用的。默认值为false 。
• min [ number ]最小属性指定<input>元素的最小值。默认值为1 。
• max [ number ]最大属性指定<input>元素的最大值。默认值为Infinity 。

密码

 < inline-editor
        type =" password "
        [(ngModel)] =" editablePassword "
        (onSave) =" saveEditable($event) "
        name =" editablePassword "
        size =" 8 "
        disabled =" true "
        min =" 1 "
        max =" 8 "
        (onError) =" myHandleError " > </ inline-editor >

• type [ string ]指定要显示的类型<input>元素。
• 每当通过单击“ event handler ”按钮保存表单时，指定的表达式将被onSave 。 $event参数将是输入发送的值返回。
• 每当通过单击“保存event handler按钮保存表单并引起错误时，指定的onError将被调用（例如：该值不在min和max之间）。
• name [ string ]定义了<input>元素的名称。默认值undefined 。
• size [ number ]定义<input>元素的字符中的宽度。默认值为8 。
• disabled [ boolean ]如果设置为true ，则禁用的输入元素是无法使用且无法使用的。默认值为false 。
• min [ number ]最小属性指定<input>元素的最小值。默认值为1 。
• max [ number ]最大属性指定<input>元素的最大值。默认值为Infinity 。

Textarea

 < inline-editor
        type =" textarea "
        [(ngModel)] =" editableTextArea "
        (onSave) =" saveEditable($event) "
        name =" editableTextArea "
        size =" 8 "
        disabled =" true "
        cols =" 50 "
        rows =" 4 "
        min =" 1 "
        max =" 8 "
        (onError) =" myHandleError " > </ inline-editor >

• type [ string ]指定要显示的类型<input>元素。
• 每当通过单击“ event handler ”按钮保存表单时，指定的表达式将被onSave 。 $event参数将是输入发送的值返回。
• 每当通过单击“保存event handler按钮保存表单并引起错误时，指定的onError将被调用（例如：该值不在min和max之间）。
• name [ string ]定义了<input>元素的名称。默认值undefined 。
• size [ number ]定义<input>元素的字符中的宽度。默认值为8 。
• disabled [ boolean ]如果设置为true ，则禁用的输入元素是无法使用且无法使用的。默认值为false 。
• cols [ number ]指定文本区域的可见宽度。默认值为50 。
• rows [ number ]指定文本区域的可见高度。默认值为4 。
• min [ number ]最小属性指定<input>元素的最小值。默认值为1 。
• max [ number ]最大属性指定<input>元素的最大值。默认值为Infinity 。

选择

基本示例

 < inline-editor
        type =" select "
        [(ngModel)] =" editableSelect "
        (onSave) =" saveEditable($event) "
        name =" editableSelect "
        disabled =" false "
        [options] =" editableSelectOptions " > </ inline-editor >

• type [ string ]指定要显示的类型<input>元素。
• 每当通过单击“ event handler ”按钮保存表单时，指定的表达式将被onSave 。 $event参数将是输入发送的值返回。
• name [ string ]定义了<input>元素的名称。默认值undefined 。
• disabled [ boolean ]如果设置为true ，则禁用的输入元素是无法使用且无法使用的。默认值为false 。
• options [ Array<optionItem> | Object:{ data: Array<optionItem, value:string, text: string } ]可以从中选择的项目数组。应该是具有value和text属性的对象数组。可以使用指定这些字段和数据的对象配置键值值参数。

打字稿代码：

  editableSelect = 2 ;
  editableSelectOptions = [
    { value : 1 , text : 'status1' } ,
    { value : 2 , text : 'status2' } ,
    { value : 3 , text : 'status3' } ,
    { value : 4 , text : 'status4' }
  ] ;

  saveEditable ( value ) {
    //call to http server
    console . log ( 'http.server: ' + value ) ;

  } 

参数的配置示例

• editableSelect [ number ]指定选择的默认值。
• editableSelectOptions [ Array<optionItem> | Object: { data: Array<optionItem, value:string, text: string } ]指定要选择的项目数组。应该是具有value和text属性的对象数组。可以使用指定这些字段和数据的对象配置键值值参数。

打字稿代码：

  editableSelect = 2 ;
  editableSelectOptionsConfiguration = {
    data : [
      { id : 1 , field : 'status1' } ,
      { id : 2 , field : 'status2' } ,
      { id : 3 , field : 'status3' } ,
      { id : 4 , field : 'status4' }
    ] ,
    value : 'id' ,
    text : 'field'
  }

  saveEditable ( value ) {
    //call to http server
    console . log ( 'http.server: ' + value ) ;

  } 

孩子们的例子

可以使用称为children的对象来配置巨型/子女来生成选择。

打字稿代码：

 editableSelectOptionsTwoLevelsDefault = 1 ;
  editableSelectOptionsTwoLevelsConfiguration = {
    data : [
      {
        id : 1 , field : 'status1' ,
        children : [
          { id : 5 , field : 'status1.1' } ,
          { id : 6 , field : 'status1.2' }
        ]
      } ,
      { id : 2 , field : 'status2' } ,
      { id : 3 , field : 'status3' } ,
      {
        id : 4 , field : 'status4' ,
        children : [ { id : 7 , field : 'status4.1' } ]
      }
    ] ,
    value : 'id' ,
    text : 'field'
  } 

空的组件

  < inline-editor
  type =" text "
  ngModel
  empty =" My custom message "
  (onSave) =" saveEditable($event) "
  (onError) =" handleError "
  name =" editableText1 "
  size =" 8 "
  min =" 3 "
  max =" 5 " > </ inline-editor >

  < inline-editor type =" select "
                [(ngModel)] =" editableSelectDoesntExist "
                (onSave) =" saveEditable($event) "
                [options] =" editableSelectOptionsConfiguration " > </ inline-editor >

• empty [ string ]指定默认消息，以显示组件没有ngmodel。如果select类型，则默认选择的元素是options阵列的第一个元素。

样式/主题

inline-editor具有以下基本主题，您可以在dist/themes/bootstrap.css中找到这些主题：

 a . c-inline-editor {
  text-decoration : none;
  color : # 428bca ;
  border-bottom : dashed 1 px # 428bca ;
  cursor : pointer;
  line-height : 2 ;
  margin-right : 5 px ;
  margin-left : 5 px ;
}
. c-inline-editor . editable-empty ,
. c-inline-editor . editable-empty : hover ,
. c-inline-editor . editable-empty : focus ,
. c-inline-editor . a . editable-empty ,
. c-inline-editor . a . editable-empty : hover ,
. c-inline-editor . a . editable-empty : focus {
  font-style : italic;
  color : # DD1144 ;
  text-decoration : none;
}

. c-inline-editor . inlineEditForm {
  display : inline-block;
  white-space : nowrap;
  margin : 0 ;
}

# inlineEditWrapper {
  display : inline-block;
}

. c-inline-editor . inlineEditForm input ,
. c-inline-editor . select {
  width : auto;
  display : inline;
}

. c-inline-editor . inline-editor-button-group {
  display : inline-block;
}

. c-inline-editor . editInvalid {
  color : # a94442 ;
  margin-bottom : 0 ;
}

. c-inline-editor . error {
  border-color : # a94442 ;
}

[ hidden ]. c-inline-editor {
  display : none;
}

与其他NGX-Libraries集成

ngx-data-table

使用Angular2-Data-Table（演示）的示例

故障排除

在报告错误和功能请求时，请遵循此准则：

1. 使用GitHub问题委员会报告错误和功能请求（不是我们的电子邮件地址）
2. 请始终写下步骤以复制错误。这样，我们可以专注于修复错误，而不是挠头试图复制它。

感谢您的理解！

发展

1. 生成所有*.js ， *.js.map和*.d.ts文件：

   npm run build

2. 调试：

   npm run build:watch

作者

Carlos Caballero -https：//github.com/caballerog

Antonio Villena -https：//github.com/xxxtonixxx

执照

麻省理工学院许可证（有关全文请参阅许可证文件） -