autocomplete-entry

Autocomplete-Entry

This Angular Module (Component) allows you to have an autocomplete or select menu. You can provide an array of objects or an Observable array of objects. This formControl will return the selected or entered item. Blur and Enter also have been implemented.

Installation

npm install autocomplete-entry

Scaffolding

Import the module into your project under imports

imports: [
  BrowserModule,
  AppRoutingModule,
  AutocompleteEntryModule
],

Inputs

The following Inputs are available

Input	Type	Defaut	Description
autocomplete	BOOLEAN	FASLE	autocomplete entry with list
data	ANY[]	[]	data for the autocomplete list or dropdown list
default	STRING	''	default selection
key	STRING	''	property to use for list values (object type array)
returnKey	STRING	''	property to use for return values (object type array)
label	STRING	''	Label for input
placeholder	STRING	''	Label for placeholder (autocomplete input)
acceptInput	BOOLEAN	FALSE	Allow for custom entry and return value
sortAlpha	BOOLEAN	FALSE	sort in alphabetical order
required	BOOLEAN	FALSE	validation required
disabled	BOOLEAN	FASLE	diable control
style	STRING	''	styles to apply to formfield/select

FormControl

For a formControl you will need to provide control for your input

formControlName="country"

 countrySelection = this.fb.group({
    country: [null],
  })

Options

<div style="margin: 24px;" [formGroup]="selection">

  <wav-autocomplete-entry
    [autocomplete]="false"
    [data]="autocompleteList"
    [default]="'Canada'"
    [key]="'name'"
    [returnKey]="'abbr'"
    [label]="'Country'"
    [acceptInput]="true"
    [placeholder]="'Canada'"
    [sortAlpha]="true"
    [required]="true"
    [disabled]="false"
    formControlName="country"
  >
  </wav-autocomplete-entry>

</div>

Data

Provide the data ether as an Observable or Static data as an array of objects

autocompleteList = [
  { name: 'United States', id: 1, abbr: 'US'},
  { name: 'Italy', id: 1, abbr: 'IT'},
  { name: 'Canada', id: 1, abbr: 'CA'},
]

Or you can provide an array of strings

autocompleteList = ['United States', 'Italy', 'Canada']

Sample Implementation

selection: formGroup

constructor(
  private fb: FormBuilder
  ) {}

ngOnInit() {

  selection = this.fb.group({
    country: [null]
  })

  this.selection.patchValue({ country: 'Canada'})
  this.selection.valueChanges.subscribe(data => console.log(data))

  }