问题标签 [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 投票
1 回答
847 浏览

css - 包裹在 matFormField 内时 matSuffix 不起作用

我目前正在尝试编写一个全局日期选择器。为此,我创建了一个组件,从角度(https://material.angular.io/guide/creating-a-custom-form-field-control)观察给定示例。我只想外包整个 mat-form-field 的一部分,所以这就是我正在做的事情:

app.component.html:

我的日期picker.component.html:

(我认为 .ts 对我的问题应该不重要)

但现在它看起来像这样:

在此处输入图像描述

如果我将它像这样包装在 app.component.html 中,也会发生这种情况:

因为它会将 matSuffix 渲染为 mat-infix 的一部分。所以看起来 matSuffix 没有被正确识别。 在此处输入图像描述

虽然它会在没有额外包装器(div)的情况下呈现它: 在此处输入图像描述

放:

在 app.component.html 中不是一个选项。我试过这个,这只会导致其他错误,这些错误比 css 错误更糟糕。

0 投票
1 回答
35 浏览

html - 在开发人员控制台中进行的更改在 angular mat-form-field 中的本地不起作用

我是 HTML 和 CSS 样式的前端开发新手,正在尝试处理 Angular 项目

我有一个 HTML 表格,在其中的行中我使用了 angular mat 选择下拉菜单。我必须对每行中的行高度进行更改,并尝试使用 chrome 开发人员工具调整高度。当我在开发人员工具控制台中进行一些更改时,UI 是我想要的。所以我将同一行代码复制粘贴到我的 CSS 文件中,但更改不起作用。我试图在开发者控制台中编辑的代码是

我正在尝试更改边框顶部,如果我在开发人员控制台中进行更改并且即使我使用相同的代码也无法正常工作。

0 投票
1 回答
300 浏览

html - Angular 9 mat-form-field 没有轮廓,没有标签

请告诉我如何摆脱 mat-form-fields 中的“线”!请看附图以便更好地理解!

谢谢你 !

这是我的代码:

在此处输入图像描述

0 投票
0 回答
933 浏览

css - 带按钮的 mat-form-field 前缀和后缀位置

我正在尝试建立一个输入列表,每个输入的边缘都有 +/- 按钮。我正在使用带有 mat-form-field 前缀和后缀的 Angular Material,它在单个输入上工作正常,但在乘法时却不行(无论是通过 ngFor 还是简单的 html 复制粘贴)。

输入应该是这样的: 输入看起来

这是每个输入在悬停时的样子: 输入悬停

这是我要修复的错误-在某些输入中(据我所知,完全是随机的)按钮会向上一点,就像这样(悬停以便更容易看到): 输入错误 - 按钮位置

完整代码在这里: https ://stackblitz.com/edit/angular-mat-form-pre-su-fix-btns?file=src/app/form-field-appearance-example.scss

0 投票
0 回答
73 浏览

angular - 以角度减少完整轮廓垫形式场的高度

这是基本代码

0 投票
1 回答
1083 浏览

angular - 编辑时如何使用表格行值填充角度模态表单?

当我单击编辑按钮时,我试图获取特定行的用户详细信息并将其填充到表单中,但我不知道该怎么做。我有一个方法,当我单击一行时,我将获取特定 id 的更新表单,但该表单为空。如何获取一个填充了 firstName、lastName、dob 的表单?

getUserById

0 投票
2 回答
488 浏览

css - 如何将字母间距添加到输入值而不是输入占位符(Angular 11)

mat-form-field在我的 Angular 项目中有一个,我需要将字母间距添加到输入值而不是输入占位符。

目前,我的输入如下所示:

mat-form-field 输入占位符

当用户在输入中键入内容时,它看起来像这样:

mat-form-field 输入值

我想要的是输入占位符看起来像这样(没有任何字母间距),但同时保持输入值的字母间距:

mat-form-field 输入占位符

有没有办法做到这一点?

这是我的HTML

这是我的SCSS

0 投票
1 回答
144 浏览

angular - 我需要将 ddmmyyyy 输入转换为 dd/mm/yyyy 日期格式。我的 html 文件和 ts 文件如下所示

如果我输入 21121997 它应该在日期文本框中转换为 21/12/1997。如果我给 01012012 那么它应该转换为 01/01/2012。那是 dd/mm/yyyy 格式。怎么做?html代码-->


ts 代码-->

0 投票
1 回答
112 浏览

css - 移除垫子表单域周围的浅蓝色光芒

如何在 mat-form-field 内的 matInput 周围消除这种浅蓝色光芒? 在此处输入图像描述

我不确定我是否需要覆盖什么属性并且我不知道该怎么做,我尝试搜索但找不到任何东西。

任何帮助,将不胜感激

0 投票
2 回答
380 浏览

node.js - Angular Mat-Form 导致网页在没有错误代码的情况下崩溃

我正在构建一个一直运行良好的 Angular 应用程序,直到我添加 mat--form-field 来构建一个多选项下拉菜单。出于某种原因,只要将 mat-form-field 块添加到代码中,网页就会崩溃。我尝试将代码的各个部分注释掉,发现错误似乎是 mat-form-field,但是我的编译器没有向我发出任何错误。

选择-page.component.html

app.module.ts

选择-page.component.ts

源上的 DevTools 错误