Форматирование углового материала автозаполнения ввода - PullRequest
Новая
       4

Форматирование углового материала автозаполнения ввода

0 голосов
/ 27 сентября 2018

Моя задача - создать вход с автозаполнением углового материала и числовым форматированием.Для проекта я построил числовой форматер, который используется во многих полях ввода.

Проблема: Angular не позволяет использовать несколько ControlValueAccessor для одного элемента управления.Поэтому я должен выбрать между форматом-CVA и autocomplete-CVA.

Я попробовал обходной путь с дополнительным скрытым вводом автозаполнения.onFocus / onBlur открывает / закрывает окно автозаполнения скрытого ввода, а событие изменения автозаполнения записывает выбранное значение в видимый ввод.Но автозаполнение углового материала не запускает событие изменения, когда оно было открыто вызовом функции.

Могу ли я отловить измененное событие из автозаполнения, открытого вручную?Знаете ли вы какие-нибудь лучшие решения для моей проблемы?

Вот моя текущая попытка: 

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FormBuilderService } from '../../../services/form-builder.service';
import { FormMetadataService } from '../../../services/form-metadata.service';
import { CustomAutocompleteComponent } from './custom-autocomplete.component';
import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material';

@Component({
  selector: 'app-custom-autocomplete-numeric',
  templateUrl: './custom-autocomplete-numeric.component.html'
})
export class CustomAutocompleteNumericComponent extends CustomAutocompleteComponent implements OnInit {
  @ViewChild('faketrigger', { read: MatAutocompleteTrigger }) faketrigger: MatAutocompleteTrigger;
  @ViewChild('faketrigger') faketextbox: ElementRef;
  @ViewChild('auto', { read: MatAutocomplete }) auto: MatAutocomplete;
  @ViewChild('textbox') textbox: ElementRef;

  constructor(
    formDataService: FormBuilderService,
    metadataService: FormMetadataService) {
    super(formDataService, metadataService);
  }

  ngOnInit() {
    super.ngOnInit();
    this.auto.optionSelected.subscribe(_ => this.setSelectedValue(_));
  }

  private setSelectedValue(event: MatAutocompleteSelectedEvent): void {
    this.textbox.nativeElement.value = event.option.value;
  }

  public openAutocomplete(): void {
    setTimeout(() => {
    this.faketrigger.openPanel();
    }, 200);
  }
  public closeAutocomplete(): void {
    this.faketrigger.closePanel();
  }

}
<div>
  <mat-form-field>
    <span *ngIf="prefix" matPrefix>{{prefix}} &nbsp;</span>
    <input class="numeric" [placeholder]="customPlaceholder" [formControl]="customFormControl" matInput #textbox
      [appHelp]="name" [appFormat]="customFormControl" (focus)="openAutocomplete()" (blur)="closeAutocomplete()">
    <span *ngIf="suffix" matSuffix>&nbsp;{{suffix}}</span>
  </mat-form-field>
  
  <mat-form-field>
    <input [matAutocomplete]="auto" #faketrigger style="display: block" matInput>
    <mat-autocomplete #auto>
      <mat-option *ngFor="let o of options" [value]="o.Value" [attr.image]="o.Key">{{o.Value}}</mat-option>
    </mat-autocomplete>
  </mat-form-field>
</div>
...