NG-ZORRO / ng-zorro-antd

Angular UI Component Library based on Ant Design
https://ng.ant.design
MIT License
8.8k stars 3.85k forks source link

在form表单中的Autocomplete组件输入第一个字符不会弹出匹配项列表 #8582

Open DuShuYuan opened 2 weeks ago

DuShuYuan commented 2 weeks ago

Reproduction link

https://stackblitz.com/edit/angular-apdfdc?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce

输入 ‘a’,没有弹出匹配项,删除再输入‘a’,匹配列表出现

What is expected?

-

What is actually happening?

-

Environment Info
ng-zorro-antd 17.4.1
Browser chrome

相关代码


import { Component, ViewEncapsulation } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'nz-demo-auto-complete-basic',
  encapsulation: ViewEncapsulation.None,
  template: `
  <form nz-form [formGroup]="form">
  <nz-form-item>
    <nz-form-control>
      <input
        formControlName="entity"
        nz-input
        [nzAutocomplete]="auto"
        (input)="onInput($event)" />
      <nz-autocomplete #auto nzBackfill [nzDataSource]="options"></nz-autocomplete>
    </nz-form-control>
  </nz-form-item>
</form>
    <!-- <div class="example-input">
      <input
        placeholder="input here"
        nz-input
        [(ngModel)]="inputValue"
        (input)="onInput($event)"
        [nzAutocomplete]="auto"
      />
      <nz-autocomplete [nzDataSource]="options" nzBackfill #auto></nz-autocomplete>
    </div> -->
  `,
})
export class NzDemoAutoCompleteBasicComponent {
  form = new FormGroup({
    entity: new FormControl(),
  });
  inputValue?: string;
  alloptions: string[] = ['abc', 'aaa', 'bgf', 'dgdfg', 'rrr'];
  options: string[] = [];

  onInput(event: Event): void {
    const value = (event.target as HTMLInputElement).value;
    if (!value) {
      this.options = [];
      return;
    }
    this.options = this.alloptions.filter((v) => v.includes(value));
  }
}

```<!-- generated by ng-zorro-issue-helper. DO NOT REMOVE -->
zorro-bot[bot] commented 2 weeks ago

Translation of this issue:

Entering the first character in the AutoComplete component in the Form Form will not pop up the list of matching items

REPRODUCTION LINK

[https://stackblitz.com/edit/angular-apdfdc?file=src%2FApp.com p%2FAPP. Component.ts)

STEPS To Reproduce

Enter ‘a’, do n’t pop up the matching, delete and then enter ‘a’, and the matching list appears

What is exfected?

-

What is actually happy?

-

ENVIRONMENT Info
NG-Zorro-ATD 17.4.1
Browser Chrome

Related code

`TS Import {component, viewEncapSulating} from '@Angular/core'; Import {formControl, Formgroup} from '@ANGULAR/FORMS';

@Component ({{ Selector: 'NZ-Demo-Auto-Complete-Basic', Encapsulation: ViewencapSulation.none, template: ` <FORM NZ-FORM [Formgroup] = "Form">

-> `, }) export class nzdemoautocompletebasiccomponent { form = new formgroup ({ Entity: New FormControl (), }); inputValue ?: string; allPTIONS: String [] = ['abc', 'aaa', 'bgf', 'dgdfg', 'rrr']; options: string [] = []; oninput (event: event): void { const value = (event.target as htmlinputElement). Value; if (! Value) { this.options = []; Return; } this.options = this.alloptions.filter ((v) => v.includes (value)); } } `` `