autocomplete-entry

Autocomplete

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	NULL	default selection
key	STRING	NULL	property to use for list values (object type array)
returnKey	STRING	NULL	property to use for return values (object type array)
displayInput	STRING	NULL	property to use for the display value of the autocomplete input
label	STRING	NULL	Label for input
placeholder	STRING	NULL	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	NULL	styles to apply to formfield/select
minLength	NUMBER	NULL	sets the min length of field
maxLength	NUMBER	NULL	sets the max length of field
prefix	STRING	NULL	sets a prefix string for an input field

FormControl

For a formControl you will need to provide controls for - country, region, city

formControlName="country"

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

Options

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

  <app-autocomplete-selection
    [autocomplete]="false"
    [data]="autocompleteList"
    [default]="'Canada'"
    [key]="'name'"
    [returnKey]="'abbr'"
    [displayInput]="'name'"
    [label]="'Country'"
    [acceptInput]="true"
    [placeholder]="'Canada'"
    [sortAlpha]="true"
    [required]="true"
    [disabled]="false"
    [minLength]="3"
    [maxLength]="10"
    formControlName="country"
  >
  </app-autocomplete-selection>

</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))

  }