角材自动完成,自动选择列表中的不同项目。

我们有一个独特的,唯一的文档编号列表,其中没有文档编号在列表中显示两次。

我试图让Angular Material自动选择独特的那一个,如果它是用复制和粘贴输入的。

enter image description here

目前,在用Ctrl-CV复制和粘贴后,我们使用了三种方法。OptionSelected用于鼠标选择,OptionActivated用于键盘选择,OnBlur用于当点击文本框时,选项将被选择。

我只是好奇Angular Material是否有更简洁的选项,或者这可能是最好的方式,只有三行代码?

<mat-form-field>
  <mat-label>Document Number</mat-label>
  <input type="text"
        matInput
        formControlName="documentNumber"
        (blur)="documentNumberChangeEvent($event)"
        [matAutocomplete]="auto"
  >
  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" 
    (optionActivated) = "documentNumberChangeEvent($event)"
    (optionSelected)="documentNumberChangeEvent($event)"
  >

解决方案:

可能是一个更好的方法是听 表格控件 valueChanges 属性。

...
@Component(...)
export class AutocompleteSimpleExample {
  readonly documentNumber = new FormControl();
  readonly options: string[] = ['One', 'Two', 'Three'];

  constructor() {
    this.documentNumber.valueChanges.subscribe(value => {
      console.log(value);
    });
  }
}

StackBlitz

给TA打赏
共{{data.count}}人
人已打赏
未分类

CSS Flexbox align-items and justify-content [repicate] [重复]。

2022-9-19 4:13:37

未分类

动态代理子对象=null不起作用

2022-9-19 4:13:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索