Input edit in place

# Summary

Lightweight edit in place text editor.

Example

Example project here

git clone https://gitlab.opinioni.net/angular-components/ngx-input-eip-example.git

Getting started

1. Install the library using npm

npm i --save ngx-input-eip

2. Import the module to yourmodule.module.ts

import { NgxInputEipModule } from 'ngx-input-eip';

3. Add the module to the imports

@NgModule({
  declarations: [
    MyComponentPage
  ],
  imports: [
    CommonModule,
    NgxInputEipModule // Adding the module import here
  ]
})
export class MyComponentModule { }

4. Start using the library

<!-- Mandatory short field -->
<ngx-input-eip [isMandatory]="true" [(ngModel)]="user.fullname" ></ngx-input-eip>

<!-- Non-mandatory long field. -->
<ngx-input-eip [isShort]="false" [(ngModel)]="user.funnyStory" ></ngx-input-eip>

Api

Inputs

| Input | Type | Default | Description | | ----- | ---- | ------- | ----------- | | [isShort] | boolean | true | If the input should appear as input or textarea. | | [isMandatory] | boolean | false | If the input is required. | | [enableValidations] | boolean | true | If the input should be validated. | | [placeholder] | string | "Type here..." | The text to display when the input is empty. | | [label] | string | "" | The label of the input. You can use html templates by using label attribute. | | [showLabel] | boolean | true | If the label should be shown. | | [autosave] | boolean \| null | null | If the input should ask confirmation before emitting the changes. | | [classes] | string | "" | Classes to add to the input. | | [customValidators] | ValidatorFn[] | [] | Adding validators to the input. | | [isDisabled] | boolean | false | If the input should be disabled. | | [numbersOnly] | boolean | false | If the input should be numbers only. | | [min] | undefined \| number | undefined | Minimum vaule for numerical input. | | [max] | undefined \| number | undefined | Maximum value for numerical input. | | [maxLength] | undefined \| number | undefined | Maximum string length for non-numerical inputs. | | [minLength] | undefined \| number | undefined | Minimum string length for non-numerical inputs. | | [submitButtonLabel] | string | "Confirm" | The label for the submit button. You can pass html using submitButton attribute. | | [cancelButtonLabel] | string | "Cancel" | The label for the cancel button. You can pass html using cancelButton attribute. | | [actionbarMode] | "always"\|"show"\|"overlay" | isShort ? 'overlay' : 'show' | How the actionbar should be displayed. Default value is "overlay" if [isShort]="true", otherwise it's "show". Mode "always" means that the actionbar takes always the necessary space, but it has visibility: hidden if hasn't any changes. Mode "show" means that the actionbar does not take space if no changes, but when there are any changes, the actionbar takes the necessary space. Mode "overlay" means that the actionbar has position: absolute. | | [animateActionbar] | boolean | true | If [actionBarMode]="'show'", should the actionbar be shown with a transition or not. | | [allowInvalid] | boolean | false | If the input should be able to emit invalid values. The input is invalid if it has at least one error. Custom error messages are counded too. ([customErrorMessages]=['Some error message']) | | [errorsParser] | (c: AbstractControl) => (string\|TemplateRef<any>)[] | DefaultErrorsParser | Function that formats errors. Default value is a function that returns the most common errors in english. | | [showErrors] | boolean | true | If the error should be shown or not. You can validate the input and set is a invalid, but choose to avoid showing the errors. | | [customErrorMessages] | (string\|TemplateRef<any>)[] | [] | Add custom errors messages. This messages will counded as errors of the input itself, and they will prevent the input from emitting changes if [allowInvalid]="false" | | [customErrorsMap] | { [key: string]: ((e?: any) => string\|TemplateRef<any>)\|string\|TemplateRef<any> } | {} | Custom errors mapping. Overwrite default messages and show your custom errors. | | [inputStyle] | [ngStyle] | {} | Custom ngStyle for the input. |

Outpus

Most of the common events from the html element will be trasmitted. | Output | Type | Description | | ------ | ---- | ----------- | | (onSubmit) | {value: string, valid: boolean, errors: any} | This event will be emitted when the input is submitted. WARNING: This event will not be emitted if [autosave]="true" | | (onCancel) | void | Emitted when the changes are cancelled (click on "deny/cancel" button). WARNING: this event will not be emitted if [autosave]="true" | | (areUnsavedChanges) | boolean | Is there any changes that hasnt been emitted to parent? Useful to block user from leaving the page if there are any unsaved changes. | | (onChange) | any | Event emitted by the input. | | (onInput) | any | Event emitted by the input. | | (onClick) | any | Event emitted by the input. | | (onFocus) | any | Event emitted by the input. | | (onKeyDown) | any | Event emitted by the input. | | (onResize) | any | Event emitted by the input. | | (onDblclick) | any | Event emitted by the input. | | (onBlur) | any | Event emitted by the input. | | (onKeyPress) | any | Event emitted by the input. | | (onKeyUp) | any | Event emitted by the input. |

Html params

Params that you can use to edit the dom.

<ngx-input-eip>
  <span label >Label for the input</span>

  <button submitButton i18n >Conferma</button>
  <button cancelButton i18n >Annulla</button>
</ngx-input-eip>

Public properties

Public properties that can be useful; You can call any of this on the component. | Method | Description | | ------ | ----------- | | get debugJson(): any | This getter will return a hash of information. Cool if you want to see exactly what is going on inside the component. | | submit(): void | Function called when the submit button is clicked. | | cancel(): void | Function called when the cancel button is clicked. | | input?: ElementRef; | The actual input where user can write. WARNING: this is a <textarea>, not an <input>. | | get allErrorsMessages(): (string \| TemplateRef<any>)[] | Get all the error messages. |

Examples

All the examples below skip the initial setup

1. Simple short input

<ngx-input-eip [(ngModel)]="myValue" ></ngx-input-eip>

2. Textarea edit-in-place

<!-- [short]="false" -->
<ngx-input-eip [short]="false" [(ngModel)]="myValue"></ngx-input-eip>

3. Numerical input

<ngx-input-eip formControlName="myValue" [numerical]="true" [min]="0" [max]="100" ></ngx-input-eip>

4. With custom html label and/or buttons

<ngx-input-eip formControlName="myValue">
  <app-my-label [for]="'myValue'" label ></app-my-label>

  <button submitButton i18n >Conferma</button>
  <button cancelButton i18n >Annulla</button>
</ngx-input-eip>

5. Calling public properties

<ngx-input-eip #input formControlName="myValue"></ngx-input-eip>

<hr>

<pre [innerText]="input.debugJson | json" ></pre>

Next features

• On numerical input, +1 if arrow up and -1 if arrow down.
• On numerical input, do not allow text input. (delete everything except the numbers)
• On numerical input, add input [step] to define how much should the value be shifted with the arrows (down/up).
• On numerical input, allow negative and decimal numbers.
• Labels: TemplateRef can be passed too, not only strings.