问题标签 [mat-input]

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 投票
2 回答
19454 浏览

angular - 如何在垫子输入上设置字符限制?

我没有在docs中找到任何提及字符限制的内容。似乎是一个非常普遍的要求。

如何向此 Textarea 添加 300 个字符的限制?

https://stackblitz.com/edit/angular-izbcey?file=app/input-overview-example.ts

0 投票
0 回答
324 浏览

firefox - 无法从 firefox 上禁用的 matInput 复制文本

问题

无法从 Firefox 上禁用的 matInput 复制文本。这适用于 Chrome 和 Safari。Stackoverflow 上有一些关于此的讨论: 链接 1 链接 2

堆栈闪电战

HTML

TS

我正在使用 Angular 的formgroup.disable()方法。根据 Mozilla,readonly 和 disabled 属性之间有明确的界限。

有几种复制文本的解决方法,有没有人在没有这些解决方法的情况下解决了这个问题,或者与 Angular Material Team 讨论这个问题以了解他们在这个问题上的立场?

0 投票
1 回答
1009 浏览

css - 如何在 angular8 中更改 Angular Material 占位符的位置?

我有我有的angular8项目angular material。我正在使用mat-autocomplete输入自动完成。这是我的html的代码

这是我完整的Stackblitz Link来演示我的问题。输入中有一个占位符,上面写着“状态”。我想把它placeholder放在输入的垂直中间,就像Html.

如何更改angular material输入占位符位置的位置?

0 投票
2 回答
560 浏览

css - 更改类名时 matInput 格式的格式更改

当我尝试使用“{{}}”将 matInput 的类设置为一个值时,它会出于某种原因更改格式。这是带有花括号的代码以及它的 外观

如果我将类名更改为其他任何名称,它会正常显示。是它的样子,以及代码:

使用花括号时如何防止这种情况发生?我的应用程序的任何其他部分都不会发生此问题。

0 投票
1 回答
2023 浏览

angular - 垫输入占位符位置

我正在使用 mat-input 构建表单,但输入占位符不在正确的位置。如何设置占位符位置?

在此处输入图像描述

这是我的html:

我从不使用 floatLabel 值。

任何想法?

提前致谢!

更新:

我也试过了,@JuNe 建议的选项,但我遇到了类似的问题:

在此处输入图像描述

我的html是:

问题类似,matlabel 添加了红色边框,但我不知道 mat-label 下方是什么或如何将 mat-label 移动到顶部。

任何想法?

谢谢!

0 投票
2 回答
67 浏览

angular - 即使出现错误,提交也完美完成

我有一个表格,有最少的字符和最多的字符,问题是如果最小值是 2 个字符并且我放了一个,我会得到 mat-error 但是在保存时它让你只用一个字符保存它。

保存按钮:

保存功能:

https://stackblitz.com/edit/angular-jkjrsd-8flxvt

0 投票
2 回答
517 浏览

angular - 访问 *ngFor 内部的表单组控件

在模板文件中,我正在迭代一个元素数组,并为每个元素插入一个单独的行。

每个元素都有相同的控件集,但是每当我在其中一个输入字段中输入错误值时,所有其他输入控件上都会出现相同的错误消息。我需要它来仅验证当前输入字段。

希望我解释清楚。下面是我的模板代码:

0 投票
1 回答
6005 浏览

html - 如何将 mat-button 与 mat-input 对齐?

我怎样才能让这两个项目正确对齐?我试图让它们完全对齐,但调整按钮高度只会使底部远离搜索输入的底部。我认为这是因为它们的中心没有对齐,所以调整高度并不是真正的正确解决方案。 在此处输入图像描述

这是HTML

这是 SCSS:

0 投票
2 回答
3228 浏览

angular - 当设置占位符时,在 Internet Explorer 11 中的页面加载时调用 matInput 的输入事件

我发现有一个 IE 错误,其中设置占位符正在调用输入事件,如此处所述。这发生在页面加载时,因此没有用户交互。

我的代码:

app.component.html

app.component.ts

app.module.ts

浏览器列表 (注意IE 9-11已启用)

tsconfig.json (注意es5

这是stackblitz 项目,但您无法使用 IE11 进行调试。在我的真实项目中,我有一个ngFor,它创建了多个输入元素。

有解决方案吗?

证明问题

IE 在页面加载时调用输入更改事件

版本

分步说明

  • ng new test(无角度路由,SCSS)
  • 替换app.component.htmlapp.component.ts(添加mat-form-fieldonValueChange()
  • 添加MatFormFieldModule,MatInputModuleapp.module.tsBrowserAnimationsModule _
  • ng add @angular/material(靛蓝粉色,没有 HammerJS,浏览器动画是的)
  • 编辑浏览器列表(在 IE 9-11 行删除 NOT)
  • tsconfig.json中设置targetes5
0 投票
1 回答
135 浏览

javascript - 角垫输入

Angular formcontrol 适用于不同的 matInput,它们具有相同的 formControlName 但不适用于第二个。为什么它适用于第一个而不适用于第二个?任何想法 ?有什么不同 ?它们只是相同的 matInput 字段,对吗?谢谢你。

为什么有 [matAutocomplete]="auto" 时它不起作用?有什么选择?

Firstone(这有效) - 输入包含问题

secondone(这不会加载问题)