如何使用输入和 FormControl 创建过滤器？

Question

我创建了一个根据用户输入的内容过滤和显示数据的输入，但我遇到了两个问题：

1. 我只能使用 ngModel 来做，这个模型在 Angular 11 中被弃用了。

2. 选择找到的值时，FormControl不更新Input。

如果需要使用FormControl。

Answer 1

考虑使用

ReactiveFormsModule

。有关示例，请参阅docs。

解决您的问题：

1. 我只能使用 ngModel 来做，这个模型在 Angular 11 中被弃用了。

您需要为输入元素创建一个带有表单控件的

FormGroup

实例。例如，

@Component({ ... })
export class SearchInputComponent implements OnInit {
  form!: FormGroup;

  ngOnInit(): void {
    this.form = new FormGroup({
      query: new FormControl('')
    });
  }

}

现在您可以将

FormGroup

的实例附加到模板中的表单元素（例如，

[formGroup]="form"

）。接下来，将

formControlName="query"

添加到输入元素。

2. 选择找到的值时，FormControl 不会更新 Input。

那是因为您没有将事件侦听器附加到

div

元素。将

(click)

和

(keydown.enter)

指令添加到父级

div

。确保添加

tabindex="0"

属性，以便用户可以使用Tab键遍历结果并按Enter键选择结果。

这里有一个StackBlitz供参考。

希望这有帮助。

Answer 2

对于问题 1：删除 ngModel，您不需要它 - formControl 拥有一切。 如果您需要控件的值 - 只需执行

control.value

，例如在过滤器中 -

let item of items | filter: term.value

对于问题2：它不会更新，直到你更新它 - 添加

click

事件到持有

div

的

item

<div (click)="updateControl(item.title)"> 
   <h1>{{item.title}}</h1>
   ...
</div>

和.ts文件这样的东西

updateControl(title: string) {
   this.control.setValue(title)
}

希望它能回答你的问题:)