级联 Angular Material 设计示例(具有反应形式)

Cascaded Angular Material Design sample (with reactive forms)

任何好的 demo/sample 展示如何级联多个 angular mat-autocomplete 控件?我看到的所有参考资料都只显示了一个独立的自动完成功能。我需要 link 两个控件(可能是三个)使用反应形式。

一个很好的类似样本可以像国家/地区的自动完成,states/provinces然后是城市(根据选择,子控件可能会或不会出现,具体取决于是否有信息)。

数据已预加载到内存中(不是很大),因此无需异步查找服务器。

每个mat-autocomplete应用于普通FormControl;独立 FormControl 或包含在 FormGroup.

例如;假设我们有 CountryCities;他们每个人都是 mat-autocomplete,但你不能 select city 直到你 select country;对吗?

我希望这就是你的意思。

所以;处理这个:

  • 将 Country formControl 设为普通的 mat-autocomplete,无需额外配置。

  • 在用户 select 国家/地区之前禁用城市 formControl。

  • countryAutocomplete 添加 optionSelected 以启用和过滤城市。

我做了一个简单的例子来解释这个例子

https://stackblitz.com/edit/multiple-autocomplete

如果你有 3 个或 4 个;让他们喜欢城市。