ngx-multi-inputs v1.0.7

Angular Multi-Input-Array Component Ngx-multi-inputs (Angular 2+)

Component will return array of input fields values which you sepcify its type i.e. text, email, etc..

Features

• The package will work just fine with its default values in case you didn't provide properties input values.
• Set title to be shown on inputs, if you provided a title property it will be show on the lable, placeholder and the button. For example if your fileds is for skills you provide the title like this title="skills" and the label will become "please enter skill", the button will read "Add skills", and so on. Or you can provide the text for each of these items.
• You set the limit to the number of fields can be added
• You can make the first input required field
• You can provide a RegExp pattern for the first input field to be validated with.
• You can specify all the text even the error messages for the required field. In case not specified default values text will be shown.
• You can use the default style like in the image or you can specify classes for each element (form tag, for-group, label, field, btn, and error messages).
• In case you provided classes, only the classes your provided will be applied to the element and the default class will be removed

Getting Started

Installing

npm i ngx-multi-inputs

Configuration

Ensure you import the module and the dependencies:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { MultiInputsModule } from "ngx-multi-inputs";

@NgModule({
  declarations: [],
  imports: [BrowserModule, MultiInputsModule],
  exports: [],
  providers: []
})
export class AppModule {}

Basic Usage

<ngx-multi-inputs
  title="Email"
  type="email"
  formClasses="my-form"
  placeholder="enter email"
  btnText="Add"
  name="emails"
  [required]="true"
  [tabIndex]="1"
  [limit]="4"
  (inputValues)="getValues($event)"
>
</ngx-multi-inputs>

@Component({
  selector: 'app',
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
});

export class App {
  getValues(inputValues) {
    console.log({ inputValues })
  }
}

Api for multi-inputs Component

These are the list of Inputs[] that are supported by the component. Configure the settings to meet your requirement.

Outputs ()

• inputValues - Return the array of values of the inputs.