ngx inline editor

ネイティブUIインラインエディターAngular（バージョン4+）コンポーネント（デモ）

新しいリリースについて通知されるために私に従ってください。

NGX-Inline-Editorは、編集可能な要素を作成できるAngular（バージョン4+）のライブラリです。このような手法は、Click-to-Editまたは編集の場所としても知られています。 Angularjsで開発されたAngular-Xedableのアイデアに基づいています。

依存関係

基本的に、Angular4自体を除くライブラリに依存しません。テーマについては、Twitter Bootstrap CSSを含める必要がある場合があります。

Angular 4+バージョン

Angular 4が安定しています。したがって、このLIBを使用してエラーが発生した場合は、Angularのバージョンが互換性があることを確認してください。このLIBの開発に使用される現在のバージョンは、Angular4 ^4.0.0です。

コントロールと機能

• 文章
• Textarea
• 選択します
• チェックボックス
• 無線
• 日付
• 時間
• DateTime
• HTML5入力
  • パターン
  • 番号
  • 範囲
• Typeahead
• UI選択
• 複雑な形
• 編集可能な行
• 編集可能な列
• 編集可能なテーブル
• テーマ

クイックスタート

1. NGX-Inline-Editorをインストールする推奨方法は、次のコマンドを使用してNPMパッケージマネージャーを使用することです。

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

2. 基本的なテーマを含めるか、次のパスにある独自のスタイルを構成します。

dist/themes/bootstrap.css

3. プロジェクトにTwitter Bootstrapと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

inlineeditordirections

文章

 < 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>要素を指定します。
• onSave [ event handler ]指定された式は、[保存]ボタンをクリックしてフォームが保存されるたびに呼び出されます。 $event引数は、入力送信の価値リターンになります。
• onError [ event handler ]指定された式は、[保存]ボタンをクリックしてエラーが引き起こされるとフォームが保存されるたびに呼び出されます（例：値はminとmaxの間ではありません）。
• name [ string ]は、 <input>要素の名前を定義します。デフォルトはundefinedです。
• size [ number ]は、文字の幅を<input>要素の幅を定義します。デフォルトは8です。
• disabled [ boolean ] trueに設定すると、無効化された入力要素は使用できず、クリックできません。デフォルトはfalseです。
• min [ number ] min属性は、 <input>要素の最小値を指定します。デフォルトは1です。
• max [ number ] max属性は、 <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>要素を指定します。
• onSave [ event handler ]指定された式は、[保存]ボタンをクリックしてフォームが保存されるたびに呼び出されます。 $event引数は、入力送信の価値リターンになります。
• onError [ event handler ]指定された式は、[保存]ボタンをクリックしてエラーが引き起こされるとフォームが保存されるたびに呼び出されます（例：値はminとmaxの間ではありません）。
• name [ string ]は、 <input>要素の名前を定義します。デフォルトはundefinedです。
• size [ number ]は、文字の幅を<input>要素の幅を定義します。デフォルトは8です。
• disabled [ boolean ] trueに設定すると、無効化された入力要素は使用できず、クリックできません。デフォルトはfalseです。
• min [ number ] min属性は、 <input>要素の最小値を指定します。デフォルトは1です。
• max [ number ] max属性は、 <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>要素を指定します。
• onSave [ event handler ]指定された式は、[保存]ボタンをクリックしてフォームが保存されるたびに呼び出されます。 $event引数は、入力送信の価値リターンになります。
• onError [ event handler ]指定された式は、[保存]ボタンをクリックしてエラーが引き起こされるとフォームが保存されるたびに呼び出されます（例：値はminとmaxの間ではありません）。
• name [ string ]は、 <input>要素の名前を定義します。デフォルトはundefinedです。
• size [ number ]は、文字の幅を<input>要素の幅を定義します。デフォルトは8です。
• disabled [ boolean ] trueに設定すると、無効化された入力要素は使用できず、クリックできません。デフォルトはfalseです。
• cols [ number ]テキスト領域の可視幅を指定します。デフォルトは50です。
• rows [ number ]テキスト領域の可視高さを指定します。デフォルトは4です。
• min [ number ] min属性は、 <input>要素の最小値を指定します。デフォルトは1です。
• max [ number ] max属性は、 <input>要素の最大値を指定します。デフォルトはInfinityです。

選択します

基本的な例

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

• type [ string ]表示する型<input>要素を指定します。
• onSave [ event handler ]指定された式は、[保存]ボタンをクリックしてフォームが保存されるたびに呼び出されます。 $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 ] selectのデフォルトの値を指定します。
• 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 ) ;

  } 

子供の例

Sublevels/Childrenを構成することは、 childrenと呼ばれるオブジェクトの配列を使用してSELECTを生成することができます。

タイプスクリプトコード：

 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（demo）を使用した例

トラブルシューティング

バグと機能のリクエストを報告するときは、このガイドラインに従ってください。

1. GitHub Issuesボードを使用して、バグと機能のリクエストを報告します（メールアドレスではありません）
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

ライセンス

MITライセンス（全文のライセンスファイルを参照） -