רכיבים: בניה של רכיב AUTOCOMPLETE נגיש באנגולר

<div #autocompleteWrapper class="autocomplete-select"
    [ngClass]="{'auto-active':privateDataFilterd.length>0 && selectActive===true}">
    <div class="auto-main-input-wrapper">
        <input type="text" [id]="dataId" #inputMain class="auto-main-input shadow-outline" aria-autocomplete="list"
            role="combobox" name="autocomplete"
            [attr.aria-expanded]="privateDataFilterd.length>0 && selectActive===true" (keyup)="dataList($event);"
            [value]="selectedText">
    </div>
    <div class="auto-list-hide" [ngClass]="{'auto-list-active':privateDataFilterd.length>0 && selectActive===true}">
        <ul class="auto-list" role="listbox">
            <li *ngFor="let dataItem of privateDataFilterd">
                <button class="auto-item shadow-inline" type="button" role="option" [value]="dataItem.itemValue"
                    [id]="dataItem?.id" (blur)="onListBlur($event)"
                    (click)="onItemSelected(dataItem);selectedId=dataItem.id;selectActive=false"
                    [attr.aria-selected]="dataItem?.id===selectedId">{{dataItem.itemText}}</button>
            </li>
        </ul>
    </div>
</div>

import { Component, OnInit, Input, ViewChild, ElementRef, Output, EventEmitter, forwardRef } from '@angular/core';
import { ISimpleSelect } from './autocomplete.interface';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

@Component({
  selector: 'app-autocomplete',
  templateUrl: './autocomplete.component.html',
  styleUrls: ['./autocomplete.component.css'],
  providers: [
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => AutocompleteComponent), multi: true }
  ]
})
export class AutocompleteComponent implements OnInit, ControlValueAccessor {
  @Input() dataId: string = '';
  @Input() selectData: ISimpleSelect[] = [];
  @Input() validation: boolean = false;
  privateData: ISimpleSelect[] = [];
  privateDataFilterd: ISimpleSelect[] = [];
  selectActive: boolean = false;
  selectedText: string = '';
  itemlistId: string = '';
  selectedId: string = '';
  @Output() isValidEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
  @Output() selectedValueEmitter: EventEmitter<string> = new EventEmitter<string>();
  @ViewChild('autocompleteWrapper', { static: false }) autocompleteWrapperRef: ElementRef;
  @ViewChild('inputMain', { static: false }) inputMainRef: ElementRef;
  constructor() { }

  ngOnInit() {
    if (typeof (this.selectData) !== "undefined") {
      if (this.selectData.length) {
        this.privateData = JSON.parse(JSON.stringify(this.selectData));
        for (let i = 0; i < this.privateData.length; i++) {
          this.privateData[i].id = this.trackByFn(this.privateData[i]);
        }
      }
    }
  }
  trackByFn(item: ISimpleSelect): string {
    if (item.id === undefined || item.id === "") {
      let idRand = item.itemValue;
      return idRand;
    }
    else
      return item.id;
  }
  validateFn: any = () => { };
  writeValue(value: any) {
    if (value !== undefined) {
      this.selectedText = value;
    }
  }
  propagateChange = (_: any) => { };

  registerOnChange(fn) {
    this.propagateChange = fn;
  }

  registerOnTouched() { }
  dataList(event) {
    this.privateDataFilterd = [];
    if (event.target.value.length > 2) {
      this.privateDataFilterd = this.privateData.filter(item => item.itemText.includes(event.target.value));
    }
    if (event.key !== 'Enter' && event.key !== 'click') {
      this.selectActive = true;
    }
  }
  onItemSelected(item: ISimpleSelect) {
    this.selectActive = false;
    this.selectedText = item.itemText;
    this.selectedValueEmitter.emit(item.itemText);
    this.propagateChange(item.itemText);
    this.inputMainRef.nativeElement.value = this.selectedText;
    this.inputMainRef.nativeElement.focus();
  }
  onListBlur(event) {
    if (this.autocompleteWrapperRef.nativeElement.contains(event.relatedTarget) === false) {
      this.selectActive = false;
      if (this.validation === true) {
        if (this.selectedText !== "") {
          this.isValidEmitter.emit(true);
        }
        else {
          this.isValidEmitter.emit(false);
        }
      }
      else {
        this.isValidEmitter.emit(true);
      }

    }
  }
}

.autocomplete-select {
    position: relative;
}

.autocomplete-select .auto-main-input {
    padding: 0;
    border: 1px solid rgb(190, 190, 190);
    background-color: transparent;
    min-width: 100px;
    min-height: 30px;
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-right: 34px;
    text-align: left;
    padding-left: 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    box-sizing: border-box;
}

.autocomplete-select .auto-main-input-wrapper::after {
    content: "";
    position: absolute;
    right: 3px;
    top: 0px;
    width: 30px;
    height: 30px;
    background-image: url("../../../../assets/icons/autocomplete.svg");
    background-size: 100%;
    background-repeat: no-repeat;
}

.autocomplete-select .auto-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
    border: 1px solid #818181;
    position: absolute;
    z-index: 999999;
    top: 100%;
    left: 0;
    max-height: 168px;
    overflow-y: auto;
    box-sizing: border-box;
}

.autocomplete-select .auto-list .auto-item {
    padding: 6px 25px;
    width: 100%;
    display: block;
    border: 0;
    border-bottom: 1px solid #b8b8b8;
    text-align: left;
    background-color: #ededed;
    word-break: break-all;
}

.autocomplete-select .auto-list .auto-item:hover,
.autocomplete-select .auto-list .auto-item:focus {
    background-color: #f1f1f1;
}

.autocomplete-select .auto-list-hide {
    display: none;
}

.autocomplete-select .auto-list-hide.auto-list-active {
    display: block;
}

export interface ISimpleSelect {
    id?:string,
    itemText:string,
    itemValue:string
}

export class ReactiveFormPageComponent implements OnInit {
  simpleSelect: ISelect[] = simpleSelectData; // SOME DATA
  form:FormGroup;
  constructor(private fb:FormBuilder) { }

  ngOnInit() {
    this.form = this.fb.group({    
     autocomplete:['',Validators.required],
     autocomplete1:[''],  
    });
  }

}

<form [formGroup]="form">
    <div class="area-wrapper">     
        <app-autocomplete formControlName="autocomplete" [selectData]="simpleSelect" dataId="auto1"></app-autocomplete>
        <app-autocomplete formControlName="autocomplete1" [selectData]="simpleSelect" dataId=auto2></app-autocomplete>    
    </div>
</form>

<p>required: {{form.valid}}</p>
<pre>{{ form.value | json }}</pre>

export class TemplateFormPageComponent implements OnInit {
  simpleSelect: ISelect[] = simpleSelectData; // SOME DATA
 

  constructor() { }

  ngOnInit() {
  }

}

<form #form="ngForm">
    <div class="area-wrapper">      
        <app-autocomplete name="autocomplete" ngModel [selectData]="simpleSelect" required dataId="auto3"></app-autocomplete>
        <app-autocomplete name="autocomplete1" ngModel [selectData]="simpleSelect" required dataId="auto4"></app-autocomplete>
    </div>
</form>

<p>required: {{form.valid}}</p>
<pre>{{ form.value | json }}</pre>