问题标签 [mat-form-field]

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 投票
0 回答
552 浏览

angular - mat-autocomplete 和输入显示不正确,我的表单有问题

我从以下网址获得了自动完成格式:http ://www.freakyjolly.com/angular-7-6-material-autocomplete-example-with-remote-server-side-results/

输入内容时,我的输入字段未擦除占位符,并且选项未显示。看起来 javascript 是正确的,并且可以正确地从数据库中提取所有内容,但我无法弄清楚为什么它们都不起作用。我有:

我在某处读到,我不应该在里面有 if 语句,但即使我把它们拿出来也不起作用

在我的 module.ts

这是我的代码:

html代码 html代码

组件.js

您可以看到我输入了 A,它在技能中超过了 S,但并没有完全消失,此外,您看到选项菜单没有出现。后端确实正确地提取了信息。 这是输入不起作用的图像

占位符搞砸了

0 投票
1 回答
1592 浏览

html - Ngx-Formly 一种自定义类型中的两个输入

有没有一种方法可以同时定义具有两个输入的自定义形式类型,而没有来自材料的黑线。
我需要的是带有滑块的正式数字输入。用户应该能够正常输入输入并更改给定值。
像这样: 我的方法:
在此处输入图像描述

在 my 中扩展自定义组件FormlyModule.forRoot({types:[...]})

模板:

我知道如何使用to.bindValue(不是在上面的示例代码中)绑定这两个值,但是在扩展输入之后,我有这个输入字段行位于我认为来自的整个表单字段下方mat-form-field
喜欢: 有没有办法缩小这条线,把它放在输入字段下,并将它保存在一个自定义类型中?谢谢你的帮助!
在此处输入图像描述

0 投票
1 回答
3498 浏览

angular - Angular Material:使用反应形式选择对象选择的多个默认值

我正在使用反应形式和角度材料垫选择创建一个表单,并启用多项选择。我有一个要在 mat select 中加载的对象列表,并希望在默认情况下预先选择该列表中的一些项目。

默认选择适用于字符串(下例中的苏打水),默认项目显示为选中图标,并且垫选择元素值已加载它们,如果我添加更多项目,它们将添加到值字段中的现有项目中。

但是我想在垫选择中加载的项目是对象(在下面的示例中为energyDrinks),当我为垫选择字段设置值时,即使字段值设置正确,默认情况下也不会检查它们。此外,如果我添加一个项目,值字段中的现有数据将被新项目覆盖。

有什么方法可以让我在 UI 选择框中检查预选项目,并让新添加的项目添加 mat-select 元素的现有值?

提前致谢

以下是示例代码 -

html -

ts 文件 -

垫子选择元素的 UI 截图

0 投票
2 回答
159 浏览

angular - angular4材料表结果错误中的自定义验证器

我正在使用 angular4-material-table 。在那里我尝试添加自定义输入验证我已经创建了单独的验证器服务在那里我调用了自定义函数来根据 api 结果访问我的 api 它将抛出输入有效与否。

这是我的代码,任何人都可以建议我犯了什么错误,

这个返回错误:无法读取 api_call 的属性,即使我在构造函数中声明了它

另一种方式:

这种方式有效,但即使输入有效或无效,它总是会引发错误。我已经用控制台检查了输出,似乎从 api 得到的结果是完美的。谁能帮助我我的错误是什么。提前致谢。

可以在这里看到一个 stackblitz 示例。

0 投票
2 回答
900 浏览

html - 如何在不同页面的 mat-form-field 上应用两个不同的 CSS?

我在一页上有mat-form-field:-

应用了以下 CSS:-

CSS 按预期反映。

问题是我在不同的页面上有另一个 mat-form-field 并且想在该字段上应用不同的 CSS(颜色:绿色,背景颜色:白色)。

是否可以在不同页面的控件上应用不同的 CSS?

0 投票
0 回答
854 浏览

html - 角度材料 - 自动完成 - 使用组过滤结果

我正在尝试使用材料自动完成创建一个简单的下拉列表,但我卡住了。我这里有几个问题:

  1. 当我选择一个选项时,我会看到它的 id,而我需要看到 name。ID 用于事件发射器和后端 - 我尝试使用 [displayWith] 但在函数内部,我仍然只获得 ID 而不是我可以映射的整个对象。
  2. 我希望能够过滤结果,但我有没有 ID 或名称的组,但也许有一种方法可以只使用 mat-option 值进行过滤?

我的 JSON 看起来像这样:

我的 HTML 组件如下所示:

任何帮助,将不胜感激。

编辑:

第 1 点已解决。我没有传递整个对象,[value]但仍然需要过滤方面的帮助。

0 投票
1 回答
517 浏览

html - 使用输入删除 mat-form-field 的边框(也用于悬停和焦点)

我很难为我的mat-form-field.
我想要的是从字段中删除边框,当字段聚焦并且用户悬停时也是如此。现在我有这个:

在此处输入图像描述

我需要在我的输入之外删除那个边框。这是我的表单域:

在 .scss 中:

“第一个”样式已正确应用,但不是边框样式。
此外,我不完全确定这是最好的方法,但在文档中没有关于如何更改所有这些部分的指示。

0 投票
2 回答
919 浏览

angular - 角度自动调整文本区域大小

[![在此处输入图像描述][1]][1]我想为文本区域设置最大高度,因此当用户继续添加文本时,如果达到最大高度,它将添加一个滚动。但是我目前的实现是它拉伸了 modal ,所以如果我添加更多文本,modal 就会变得太长。

我们如何使模态不会被拉伸?谢谢。

html

0 投票
1 回答
1420 浏览

html - 如何在Angular中的芯片旁边放置文本输入

我正在尝试制作可以显示标签、输入和下拉的 mat 表单字段,如下面的设计,但我不知道如何实现这一点,所以任何人都可以帮助我。我已经尝试了几个小时的不同方法,但仍然找不到使它起作用的方法。如果有人可以给我建议或帮助,将不胜感激。

我只是想将文本输入始终放在筹码旁边(如果用户放了很多筹码,可能会像我现在所拥有的那样扩展),并且在侧面也有下拉选项(图标),如下面的设计。

这是我正在尝试做的设计

在此处输入图像描述

在此处输入图像描述

这就是我现在所拥有的

在此处输入图像描述

0 投票
1 回答
391 浏览

css - 有条件地改变垫形式波纹的颜色

我正在开发一个角度应用程序。我正在使用 mat-form-field 如下。

我得到一个带有上述代码的矩形表单域。当我将鼠标悬停在垫子表单字段的底线上时,例如当我将鼠标放在特定表单字段的底部时,我想更改颜色。为此,我正在起诉 CSS

默认情况下,它会更改垫子表单字段的基础颜色。我在这里面临的问题是我想要在其他情况下使用不同的颜色。例如,在我的组件中,我有一个变量,如果它的值为 X,那么我想要上面的颜色,如果它的值为 Y,那么我想应用不同的波纹颜色。由于 mat-form-field-ripple 似乎在 mat 表单字段的内置属性中,我无法在运行时更改颜色。我在上面的代码中给出的任何颜色都适用于每种情况。但我想在不同的条件下有不同的颜色。我怎样才能做到这一点?