问题标签 [mat-autocomplete]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
2304 浏览

angular - 与按钮一起使用的 mat-autocomplete(如 md-autocomplete)

在 Angular Material 1 中,可以通过单击按钮打开md-autocomplete下拉列表(参见doc)。

mat-autocomplete在 Angular Material 2 中,我认为(cf doc )没有这种可能性。这在某种程度上仍然可能吗?如何 ?我正在考虑使用input隐藏和触发器openPanel,但对于这样一个简单的用法来说似乎有点矫枉过正......

谢谢你的帮助

[编辑]
现在我的代码是这样的(我没有添加按钮,因为我不确定这是正确的方式)

0 投票
4 回答
13582 浏览

angular - 为使用 mat-autocomplete 的组件编写单元测试

我是 Angular 的新手,我正在尝试使用 Angular 5 构建一个具有自动完成功能的文本字段。

我在Angular Material docs中找到了这个例子:

https://stackblitz.com/angular/kopqvokeddbq?file=app%2Fautocomplete-overview-example.ts

我想知道如何编写一个单元测试来测试自动完成功能。我正在为输入元素设置一个值并触发“输入”事件并尝试选择 mat-option 元素,但看到它们都没有被创建:

我的组件 html 的相关部分:

规格文件:

组件html:

在此之前,我意识到要让 FormControl 对象设置值,我必须先做一个 inputElement.focus(),这与使用角度材料的 mat 输入有关。我需要做些什么来触发打开 mat-options 窗格吗?

我如何使这个测试工作?

0 投票
1 回答
1377 浏览

angular - 如何将从数据库中获取的值设置为 Angular Material Autocomplete 的默认值

我想从数据库中获取一个值并将其设置为自动完成输入框中的默认值。

填充客户端类型

用于自动完成 DisplayWith

在html中

当我使用编辑时,我从数据库中获取保存的 accountTypeId。我的问题在于如何将获取的 accounTypeId 作为默认选项放置到 matautocomplete 中,但仍然可以获得其余选项?

谢谢你。

0 投票
1 回答
2547 浏览

angular - 允许用户在角度 6 中仅输入 mat-autocomplete 中的选项

我正在使用垫子自动完成功能。

想知道是否有办法限制用户只输入下拉菜单中提供的选项,即。仅一、二和三。当用户键入像16之类的其他内容时,不应显示

0 投票
0 回答
266 浏览

angular5 - 如何使用 mat-autocomplete 和 angular 5 调用远程数据

我有一个带有 mat-autocomplete 和 mat-chip-list 组件的表单。它适用于我在数组中的静态数据。但是,当我尝试从服务远程加载数据时,出现错误:

这是我在 Controller 中的代码:

我的模板:

0 投票
2 回答
16825 浏览

typescript - 如何在角度材料 2 中使用 mat-chip 和自动完成来保存选定的对象

我正在使用 Angular 6 和 Angular 材质。我正在尝试从 mat-chip 和自动完成中保存选定对象或选定对象列表。我能够将字符串值发送到 fruits[] 数组,但不能将选定的对象发送到 fruits[] 数组。请帮我找到解决方案。谢谢。

我的演示项目链接:stackblitz 上的演示代码

0 投票
1 回答
2831 浏览

angular-material - 具有动态输入的角垫自动完成

我是角度材料设计的新手,我对动态输入的 mat-autocomplete 有疑问。By default user see one input but when some value is selected than another input can be added and this is the tricky part - how to make that all those inputs will be using only one mat-autocomplete? 可能吗?

下面是我使用 mat-autocomplete 的代码。addItem() 函数正在添加另一个输入,该输入将绑定到同一个 mat-autocomplete。它应该移到上面吗?那么唯一ID呢?如何通过连接到同一个 mat-autocomplete 的多个输入来解决这个问题?

0 投票
1 回答
329 浏览

angular - angular material 2 自定义组件使用 mat-auto-complete

我有多个表单,用户必须通过自动完成来指定他们的国家。

我实现了一个执行自动完成的服务(联系后端,处理响应和返回建议)

现在我想创建一个组件以在所有表​​单中重用。

该组件将取决于:

  • 我提到的服务
  • 一个matInput field
  • 一个mat-auto-complete

该组件将实现ControlValueAccessorMatFormFieldControl

父组件会像这样使用它

父组件创建FormControl命名country并指定其验证器(在某些形式中,国家是必需的,而在其他形式中则不是)。

问题

通常matInput绑定到FormControl, 并通过[matAutocomplete]指令自动完成。

但是,在我的情况下,情况并非如此,matInput因为FormControlmatInput不受FormControl.

但是我担心该[matAutocomplete]指令,我认为该指令是阅读它与之交互的源matInput及其相关联的FormControl.

我应该如何处理这个?

我是否让事情变得比必要的更复杂?

0 投票
1 回答
3399 浏览

angular-material - 将动态生成的输入字段连接到 mat-autocomplete

我允许用户动态创建输入字段。对于这些输入字段中的每一个,我想将其连接到不同的垫子自动完成功能,以便它们彼此独立工作。我在这里碰壁了,因为我无法动态创建将自动完成连接到输入的元素引用(#auto here)。我如何实现这一目标?

0 投票
3 回答
4128 浏览

angular - 必须在索引处为表单控件提供一个值:1 - 错误

我正在使用带有垫子自动完成功能的反应式表单。我在我的应用程序的其他部分使用了自动完成功能,但我无法弄清楚。我有一个formarray,每次我想在我的情况下添加一个新传感器时都会添加一个输入。自动完成在我的第一个输入中工作正常,但是当我尝试添加更多输入时显示错误:错误:必须为索引处的表单控件提供值:1

HTML:

TS:

形式数组:'sensors_id': this.fb.array([], Validators.required),

我是新手,所以如果我不是很清楚,我很抱歉..但我还没有找到解决方案