Автоматический выбор углового материала не работает - PullRequest
Новая
       14

Автоматический выбор углового материала не работает

0 голосов
/ 28 апреля 2019

Постарайтесь сделать автозаполнение угловым материалом, который заставит пользователя выбрать автозаполнение.Я следил за этой темой, но, похоже, она не работает:

Выбор силы автозаполнения углового материала

Я попробовал подход с добавлением размытия к входу и optionSelected.Но кажется, что событие размытия всегда срабатывает перед моим optionSelect, поэтому optionSeleced никогда не срабатывает. 

<mat-form-field class="example-full-width">
  <div formGroupName="CityGroup">
    <input (blur)="checkCity()" #autoComplInput type="text" placeholder="city" aria-label="Number" required matInput
      formControlName="cityName" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option (click)="optionSelect(option,$event)" *ngFor="let option of filteredOptionsCity | async" [id]='0'
        [value]="option.cityName">
        {{option.cityName}}
      </mat-option>
    </mat-autocomplete>
  </div>
<mat-form-field>

TS 

checkCity() {
    if (!this.selectedCity.cityName || 
    this.selectedCity.cityName !== this.form.get('CityGroup').get('cityName').value) {
        this.form.get('CityGroup').get('cityName').setValue('');
        this.selectedCity = '';
}

1 Ответ

1 голос
/ 28 апреля 2019

Вы можете подписаться на valueChanges из FormControl и проверить, действителен ли он.На размытие вы можете проверить, является ли он действительным или нет и очистить его.Примерно так:

HTML 

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input (blur)="blurInput()" type="text" placeholder="Pick one"
            aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let option of options" [value]="option">
                {{option}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>

TS 

export class HomeComponent implements OnInit {
  myControl = new FormControl();
  options: string[] = ['One', 'Two', 'Three'];
  isValid = false;

  constructor() { }

  ngOnInit() {
    this.myControl.valueChanges.subscribe(val => {
      let results = this.options.filter(option => {
        return option.toLowerCase().startsWith(val.toLowerCase());
      });
      this.isValid = results.length > 0;
    });
  }

  blurInput() {
    if (!this.isValid)
      this.myControl.setValue("");
  }
}

Или, возможно, добавить пользовательский валидатор: https://stackoverflow.com/a/55375942

...