ab-input v1.0.6

How to use

Install dependency

npm i -S ab-input

In angular.json, add dependent styles

"styles": [
  "./node_modules/primeng/resources/themes/nova-light/theme.css",
  "./node_modules/primeng/resources/primeng.min.css",
  "./node_modules/ab-input/ab-input.css",
  "src/styles.less"
]

In app.module.ts, import InputModule

import { InputModule } from 'ab-input';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    InputModule
  ],
  providers: [{ provide: NZ_I18N, useValue: en_US }],
  bootstrap: [AppComponent]
})

In app.component.ts, declare inputControl

inputControl = {
  model: "",
  type: "text",
  className: "user-name",
  controlName: "userName",
  placeholder: "user name",
  isRequired: true,
  pattern: "w"
};

In app.component.html, reference

<app-input
  [(ngModel)]="inputControl.model"
  [name]="inputControl.controlName"
  [control]="inputControl"
  [required]="inputControl.isRequired"
  [email]="inputControl.type === 'email'"
  [pattern]="inputControl.pattern"
></app-input>

Component Examples

Text input

inputControl = <inputItem>{
  model: "",
  type: "text",
  className: "user-name",
  controlName: "userName",
  placeholder: "user name",
  isRequired: true,
  pattern: "w"
};

<app-input
  [(ngModel)]="inputControl.model"
  [name]="inputControl.controlName"
  [control]="inputControl"
  [required]="inputControl.isRequired"
  [email]="inputControl.type === 'email'"
  [pattern]="inputControl.pattern"
></app-input>

Textarea input

inputControl = <inputItem>{
  model: "",
  type: "textarea",
  className: "remarks form-textarea",
  controlName: "remarks",
  placeholder: "remarks",
  isRequired: true,
  pattern: ""
};

<app-input
  [(ngModel)]="inputControl.model"
  [name]="inputControl.controlName"
  [control]="inputControl"
  [required]="inputControl.isRequired"
  [email]="inputControl.type === 'email'"
  [pattern]="inputControl.pattern"
></app-input>

Email input

inputControl = <inputItem>{
  model: "",
  type: "email",
  className: "email",
  controlName: "email",
  placeholder: "email",
  isRequired: true,
  pattern: ""
};

<app-input
  [(ngModel)]="inputControl.model"
  [name]="inputControl.controlName"
  [control]="inputControl"
  [required]="inputControl.isRequired"
  [email]="inputControl.type === 'email'"
  [pattern]="inputControl.pattern"
></app-input>

Number input

inputControl = <inputItem>{
  model: "",
  type: "number",
  className: "stock",
  controlName: "stock",
  placeholder: "stock",
  isRequired: true,
  pattern: "",
  minNumber: 12,
  isIntegerOnly: true // if allow float number, just remove this field
};

<app-input
  [(ngModel)]="inputControl.model"
  [name]="inputControl.controlName"
  [control]="inputControl"
  [required]="inputControl.isRequired"
  [email]="inputControl.type === 'email'"
  [pattern]="inputControl.pattern"
></app-input>

Datepicker

inputControl = <inputItem>{
  model: "",
  type: "calendar",
  className: "started-date",
  controlName: "startedDate",
  placeholder: "Started Date",
  isRequired: true
};

<app-input
  [(ngModel)]="inputControl.model"
  [name]="inputControl.controlName"
  [control]="inputControl"
  [required]="inputControl.isRequired"
  [email]="inputControl.type === 'email'"
  [pattern]="inputControl.pattern"
></app-input>