有没有什么方法可以阻止占位符作为下面代码片段的标签浮动?
<form class="search-form">
<mat-form-field class="example-full-width">
<input class="toolbar-search" type="text" matInput>
<mat-placeholder>Search</mat-placeholder>
<mat-icon matSuffix style="font-size: 1.2em">search</mat-icon>
</mat-form-field>
</form>
我已经看了官方文档的Angular /材料,但似乎这个功能现在被弃用了?
7条答案
按热度按时间lvjbypge1#
假设您正在使用最新稳定版本的材料2,
您可以使用**floatLabel=“never”**强制标签不浮动。
这里是live working demo
这在文档https://material.angular.io/components/form-field/api中很清楚
cgh8pdjw2#
请将mat-form-field的外观设置为标准,占位符将不再像标签一样工作。
说明:默认情况下,mat-form-field中的mat-label是浮动的,mat-form-field的外观是“传统”的。这意味着如果mat-label没有出现在表单域中,占位符将开始像标签一样向上浮动。因此,要停止这种情况,您应该手动将外观更新为“标准”,这样它就不再像标签一样,而是作为占位符。
wa7juj8i3#
Praveen Soni的上述回答不适用于非遗留版本,如下所示:
注意:只有旧版外观支持从不选项。最初添加从不是为了使浮动标签模拟标准输入占位符的行为。但是,表单域现在支持浮动标签和占位符。因此,在非旧版外观中,从不选项已被禁用,而只使用占位符。
这意味着您只需使用占位符而不是标签。
sqyvllje4#
1.在mat-form-field中使用floatLabel=“never”
wsewodh25#
只需在
mat-form-field
中添加floatLabel="never"
,即如图所示,光标位于
input
字段内,但标签没有浮动。zzlelutf6#
eh57zj3b7#
根据浮动标签的官方文档,占位符也被提升为非“outline”外观的mat-form-field的标签。为了防止这种情况,您应该指定一个空标签,如下所示: