角材料自动完成力选择 [英] Angular Material Autocomplete force selection

问题描述

在我的 angular 5 应用程序中，我有一些 matAutocomplete，但我想强制选择一个建议，所以我遵循这种方法:stackblitz但出于某种原因，我遇到了一个问题:

<块引用>

无法读取未定义的属性panelClosingActions"在 CustomerDetailComponent.countryClosingActions (customer-detail.component.ts:199)在 CustomerDetailComponent.ngAfterViewInit

我有多个 matAutocomplete，但只有这个有问题.(有关此方法的信息在此处 github

html

<input matInput #nation placeholder="{{'customer.detail.labels.country'|翻译 }}" 需要 [matAutocomplete]="tdAuto" name="country"#count="ngModel" [(ngModel)]="selected.country"(ngModelChange)="searchCountry($event)"><mat-autocomplete #tdAuto="matAutocomplete" [displayWith]="displayFn"><mat-option (onSelectionChange)="setCountry(country)" *ngFor="let country of countries" [value]="country"><div class="row"><img src="assets/img/flags24/{{country.alpha2Code |小写}}.png"/><span>{{country.name}} ({{country.alpha2Code}})</span>

</mat-option></mat-autocomplete></mat-form-field>

组件

@ViewChild('nation', { read: MatAutocompleteTrigger }) trigger: MatAutocompleteTrigger;订阅:订阅；ngAfterViewInit() {this.countryClosingActions();}私人国家关闭操作():无效{如果 (this.subscription && !this.subscription.closed) {this.subscription.unsubscribe();}this.subscription = this.trigger.panelClosingActions.subscribe(e => {console.log('关闭')如果 (!e || !e.source) {this.selected.country = null;this.selfCountry = null;}},错误 =>this.countryClosingActions(),() =>this.countryClosingActions());}

解决方案

使用 blur 事件和 matAutocomplete 输出事件 (optionSelected) 我们可以强制用户选择选项.

<输入类型=文本"占位符=国家*"matInput formControlName=国家"[matAutocomplete]=countryAutoList"；(blur)="checkCountry()"><mat-autocomplete autoActiveFirstOption #countryAutoList="matAutocomplete";(optionSelected)=countryClick($event)"><mat-option *ngFor="let item of countryList";[value]=item.Name">{{item.Name}}</mat-autocomplete></mat-form-field>

ts 文件函数

countryClick(event: any) {this.selectedCountry = event.option.value;}检查国家(){setTimeout(()=>{if (!this.selectedCountry || this.selectedCountry !== this.signatureFormGroup.controls['country'].value) {this.signatureFormGroup.controls['country'].setValue(null);this.selectedCountry = '';}}, 1000);}

根据您的要求，您始终可以使用 setTimeout 窗口函数延迟在 blur 或 optionSelect 事件中调用的函数.

setTimeout(()=>{//函数内容}, 1000);

In my angular 5 application I have some matAutocomplete, but I want to force the selection of oone of suggestions, so I am following this approach: stackblitz but for some reason in one case I have an issue:

Cannot read property 'panelClosingActions' of undefined at CustomerDetailComponent.countryClosingActions (customer-detail.component.ts:199) at CustomerDetailComponent.ngAfterViewInit

I have multiple matAutocomplete but only this one have problems. (info about this method is here github

html

<mat-form-field>
    <input matInput #nation placeholder="{{'customer.detail.labels.country'
      | translate }}" required [matAutocomplete]="tdAuto" name="country"  
      #count="ngModel" [(ngModel)]="selected.country"
      (ngModelChange)="searchCountry($event)">
        <mat-autocomplete #tdAuto="matAutocomplete" [displayWith]="displayFn">
          <mat-option (onSelectionChange)="setCountry(country)" *ngFor="let country of countries" [value]="country">
             <div class="row">
               <img src="assets/img/flags24/{{country.alpha2Code | lowercase}}.png" />
                  <span>{{country.name}} ({{country.alpha2Code}})</span>
             </div>
         </mat-option>
        </mat-autocomplete>
    </mat-form-field>

component

@ViewChild('nation', { read: MatAutocompleteTrigger }) trigger: MatAutocompleteTrigger;
  subscription: Subscription;


ngAfterViewInit() {
    this.countryClosingActions();
  }

  private countryClosingActions(): void {
    if (this.subscription && !this.subscription.closed) {
      this.subscription.unsubscribe();
    }

    this.subscription = this.trigger.panelClosingActions
      .subscribe(e => {
        console.log('closing')
        if (!e || !e.source) {
          this.selected.country = null;
          this.selfCountry = null;
        }
      },
      err => this.countryClosingActions(),
      () => this.countryClosingActions());
  }

解决方案

Using blur event and matAutocomplete output event (optionSelected) we can force user to select option.

<mat-form-field class="example-full-width">
  <input type="text" placeholder="Country*" matInput formControlName="country" [matAutocomplete]="countryAutoList" (blur)="checkCountry()">
  <mat-autocomplete autoActiveFirstOption #countryAutoList="matAutocomplete" (optionSelected)="countryClick($event)">
    <mat-option *ngFor="let item of countryList" [value]="item.Name">{{item.Name}}</mat-option>
  </mat-autocomplete>
</mat-form-field>

ts file functions

countryClick(event: any) {
  this.selectedCountry = event.option.value;
}

checkCountry() {
 setTimeout(()=> {
  if (!this.selectedCountry || this.selectedCountry !== this.signatureFormGroup.controls['country'].value) {
    this.signatureFormGroup.controls['country'].setValue(null);
    this.selectedCountry = '';
  }
 }, 1000);
}

depend on your requirement you can always delay the function which you call in blur or optionSelect event using setTimeout window function.

setTimeout(()=> { 
// function contents
}, 1000);

这篇关于角材料自动完成力选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！