如何给primeng自动完成占位符一个浮动标签函数？Angular 9+ PrimeNg
在Angular 9+中，PrimeNg的自动完成组件提供了一个pAutoComplete指令，用于实现输入框的自动完成功能。要给自动完成组件添加一个浮动标签函数，可以使用以下步骤：
- 在HTML模板中，将
p-autoComplete指令应用到输入框上，并使用[(ngModel)]绑定一个变量来存储用户输入的值。例如：
<input pAutoComplete [(ngModel)]="selectedValue" />- 在组件的Typescript文件中，定义一个变量来存储标签的浮动状态。例如：
isFloatingLabel: boolean = false;- 在自动完成组件的初始化函数或ngOnInit生命周期钩子中，为自动完成组件的
onFocus和onBlur事件绑定相应的处理函数。例如：
onInputFocus() {
this.isFloatingLabel = true;
}
onInputBlur() {
if (!this.selectedValue) {
this.isFloatingLabel = false;
}
}- 在HTML模板中，根据
isFloatingLabel变量的状态来添加/移除浮动标签的类。例如：
<div class="input-wrapper" [ngClass]="{ 'float-label': isFloatingLabel }">
<label *ngIf="isFloatingLabel">浮动标签</label>
<input pAutoComplete [(ngModel)]="selectedValue" (focus)="onInputFocus()" (blur)="onInputBlur()" />
</div>- 根据具体需求自定义浮动标签的样式，并在CSS文件中定义相应的类。例如：
.float-label label {
position: absolute;
top: -20px;
left: 10px;
background-color: white;
padding: 0 5px;
font-size: 12px;
color: gray;
}通过以上步骤，就可以实现给PrimeNg自动完成组件添加一个浮动标签函数。请注意，这只是一种实现方式，具体的实现可能会根据项目需求和个人偏好而有所不同。
推荐的腾讯云相关产品：无
相关·内容
1回答
我试图在我的jhipster(spring/ PrimeNG )项目中使用PrimeNG图表，而所有类型的图表(或其他PrimeNG组件)都没有显示。我用的是角7.3.7和角7.1.3。我确实看到了一些报告的问题，并尝试了不同的解决方案，但没有结果。
Html页面
<p-chart type="bar" width="400" height="400" [data]="data" [options]="options"></p-chart>
组件代码
import {Component, O
浏览 0提问于2019-05-22得票数 0
1回答
我在我的应用程序中使用p-dropdown，并注意到在升级到PrimeNG 9和Angular 10之后，p-dropdown不再将自定义值作为默认值。相反，它将选项列表中出现的第一个值作为默认值。此外，标签现在只填充了下拉列表的一半，而重置只是空的。我该如何解决这个问题呢？提前谢谢。
这是我的模板：
<div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="10px">
<p-dropdown [options]="cityList" too
浏览 6提问于2020-11-19得票数 3
我使用的是angular5和角material2。我想删除所需字段的星号或星号。我也想添加一个自定义星号或星号前的地方持有人。
<mat-form-field>
<input matInput placeholder="Applicant Name" name="inputApplicantName"
[(ngModel)]="inputApplicantName" required>
</mat-form-field>
浏览 0提问于2018-04-08得票数 9
回答已采纳
2回答
我正在尝试浮动一个标签，它工作得很好。当用户关注输入并键入内容时，标签文本被粘贴在上方，当用户单击下一个字段时，输入文本消失，标签文本放置在输入中。我需要检查，如果有人键入我想坚持浮动标签上面的话。我会附上小提琴链接，请查收。我们将非常感谢您的帮助。 谢谢 Fiddle link .newForm {
background-color: #fff;
}
.newForm input {
width: "100%";
padding: 10px;
}
.newForm input:focus + label {
color: #0f73ee;
fon
浏览 18提问于2020-07-20得票数 1
回答已采纳
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css",
"node_modules/primeicons/primeicons.css",
浏览 3提问于2019-12-10得票数 2
回答已采纳
我使用的是angular 5和材质5.2。如果字段不为空，我想更改输入字段占位符的颜色。当我专注于字段时，我可以更改颜色，但如果值存在，则无法更改颜色。
我试过下面的代码。它改变了所有字段的空值和非空值。我只想改变非空域的颜色。请给我一些建议
::ng-deep .mat-form-field-placeholder{
color:#2196F3
}
::ng-deep .mat-focused .mat-form-field-placeholder{
color:#2196F3;
}
::ng-deep .mat-form-field-underline .mat-form
浏览 12提问于2018-02-19得票数 1
回答已采纳
7回答
有什么方法可以阻止占位符作为以下代码片段的标签浮动吗？
<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
浏览 5提问于2018-02-01得票数 20
回答已采纳
我正在尝试添加PrimeNg到我的项目，但是，我得到这个奇怪的错误，我不确定如何修复它。有人能帮我吗？我的机器上安装的angular的当前版本是12.1.4。 205-185-99-116:learngaroo sulavdahal$ npm install primeng --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: learngaroo@0.0.0
npm ERR! Found: @angular/c
浏览 103提问于2021-08-10得票数 0
回答已采纳
1回答
我正在尝试在我的Angular 4代码中使用PrimeNg组件。模块被正确导入，但是样式没有被应用。
浏览器控制台正在显示404 error。
我使用了angular-cli来获取项目样板。
我在index.html中使用链接标签包含了样式，如下所示：
<link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css" />
<link href="/node_modules/primeng/resources/themes/omega/th
浏览 2提问于2017-09-23得票数 1
2回答
添加上下文路径角2
、、、
我想运行我的应用程序，而不是在。
我试图在index.html上更改基本的href，但是我得到了未实现的SyntaxError:意外令牌<
这是我的index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PrimengQuickstartCli</title>
<base href="pilot/"/>
<meta name="viewport" c
浏览 2提问于2017-01-24得票数 1
回答已采纳
3回答
我迁移到了PrimeNG 6.1.7，并遇到了p下拉列表的问题。这是我在app.module中的代码导入(取自一个简单的示例)：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule} from '@angular/platform-
浏览 1提问于2018-11-28得票数 1
回答已采纳
我正在使用Angular 11的PrimeNG多选。其中一个选项标签有更长的文本。我想切片标签，如果它超过一定的长度。有谁能帮我实现这一点吗？
选项是
@Input() options: ISelectOption<number, string>[];
<p-multiSelect
#multiSelect
[options]="options"
[(ngModel)]="values"
optionLabel="name"
dropdownIcon="fas fa-caret-
浏览 62提问于2021-10-13得票数 1
我想使用Angular 2显示一个占位符图像。
在Angular 1中，我们可以使用ng-src并这样做，例如：
<img src="img/placeholder.jpg" ng-src="{{actualone.img}}">
但我不确定在Angular 2中做这件事的正确方法是什么。
有什么想法吗？
谢谢!
浏览 0提问于2016-04-11得票数 1
1回答
我有一个非常奇怪的问题，似乎无法弄清楚我是在查看javascript还是css问题。这里有一个，用于我所说的一些上下文。如果您在输入框中键入而没有看到标签弹出，请删除文本并键入again...weird，对吗？
我有一个表单，可以直接查看，也可以在iFrame中查看。在输入方面，我使用使用placeholder值提供浮动标签。
$(document).ready( function() {
$('input').jvfloat();
});
我在不同的浏览器(当前的版本)得到不同的结果，而且，奇怪的是，无论是在iFrame中还是不在浏览器中。
Chrome
在IFrame
浏览 3提问于2013-11-13得票数 2
回答已采纳
1回答
基于引导的浮动输入位置保持值无法更改。希望将某些文本显示为默认占位符&应该启用可编辑的占位符/值区域。请帮帮忙
<div class="form-floating mb-3 ">
<input
type="text"
class="form-control "
id="floatingInput"
placeholder="Enter text here …"
value
浏览 2提问于2022-05-17得票数 0
回答已采纳
节点版本: 8.12.0 Angular版本: 7.3.4 PrimeNG版本: 7.0.0
我正在使用PrimeNG的autocomplete组件的dropdown功能。它只在第一次加载下拉菜单，同样在单词之后没有任何反应，这是自动完成功能函数的问题，我的代码看起来像这样：
<p-autoComplete [(ngModel)]="selectedCompany" styleClass="smlldropdwn" [suggestions]="companySuggestions" (completeMethod)="searc
浏览 4提问于2019-03-08得票数 0
当被选中一个标签时，我需要在PrimeNG中去掉TabMenu的边框。 ? 我使用的是最新版本或PrimeNG和angular 11。 我该怎么做呢？
浏览 15提问于2021-04-25得票数 0
我正在使用Primeng p-tabview创建选项卡。我需要的标签标题对齐的中心，如图所示。有没有人能帮我解决这个问题呢？
<div class="ui-g-12" style="height:100%;">
<p-tabView class="analysisTab">
<p-tabPanel header="TRADER">
</p-tabPanel>
<p-tabPanel header="EVENTS&
浏览 0提问于2017-10-05得票数 1
Textangular库使用angular-sanitize来清理文本。我想能够插入youtube视频的iframe标签，以支持嵌入视频。
如何让angular-sanitize允许iframe标签？
浏览 2提问于2014-03-14得票数 5
我有一个使用翻译管道的占位符的PrimeNG下拉控件。当我最初加载视图时，占位符将按预期显示。但是，当我刷新页面时，下拉列表总是显示下拉菜单，并选择了第一个选项。我试图将转换移到代码中，并通过数据绑定使用变量，但在这种情况下，占位符只显示翻译标签。唯一有效的方法就是不使用任何翻译。在这种情况下，即使在页面刷新之后也会显示占位符。
HTML：
<p-dropdown [options]="myOptions" [(ngModel)]="option" placeholder="{{ 'LABEL' | translate }}"
浏览 9提问于2021-09-30得票数 1
回答已采纳
2回答
我有加拿大邮政AddressComplete工具内置在我的表单中。它类似于谷歌地图自动完成，在那里，一旦你开始键入你的地址，它将显示建议的下拉。
但是，一旦选择了地址，“邮政编码”和“城市”字段中的文本将与标签重叠。但是，当我使用Google自动填写表单时，这些数据在“邮政编码”和“城市”字段中显示得很好。
如果有帮助的话，我已经在下面包含了加拿大邮政AddressComplete的代码，以及这两个字段的HTML。
您可以在查看表单，只需选择任意数量并单击next，这将带您到第二个带字段的页面。
截图：
除了完全隐藏字段标签之外，我没有成功地找到解决方案。我试过在其他关于Chrome自动填充重
浏览 1提问于2019-05-19得票数 0
回答已采纳
我用的是角13和PrimeNG 13.4.1。我想让标签直接放在文本字段的上方，所以我创建了
<div class="ui-fluid" style="padding-top: 200px; padding-bottom: 200px;">
<div class="p-field">
<span class="p-float-label">
<input type="text" formControlName="
浏览 11提问于2022-07-15得票数 0
回答已采纳
我在我的Angular应用程序中使用了PrimeNG。我打算使用p-dropdown组件，但它在我的组件中呈现得非常奇怪。 ? 这看起来与他们在文档中演示的完全不同。 这是package.json。(也许Bootstrap和PrimeNG版本控制未对齐，或者类似的情况？)： {
"name": "soar",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng
浏览 33提问于2019-06-30得票数 2
5回答
在一个角4(材料)应用程序，我有一个搜索文本字段。当我键入该字段时，会出现第二个字段，显示输入的文本。当我滚动页面时，这个新字段会浮动。如何禁用浮动行为？
它似乎不是文本字段的默认行为。我尝试过md-no-float，但这是我所理解的占位符文本。有人建议设置一个空的value，所以我补充说，但问题仍然存在。
<md-input-container md-no-float style="width: 100%">
<input mdInput formControlName="search" value="" plac
浏览 6提问于2017-09-26得票数 6
回答已采纳
我目前正面临着通过可观察数据订阅数据的问题。直到订阅数据并将其存储在局部变量(对象数组)中以供显示，同时该组件加载并由此不显示数据，因为它仍在从后端获取数据。我假设这个问题是关于竞态条件(异步)的，有关于如何处理这个问题的线索吗？
我正在读取Json数据，它获取'ObjectArray‘中的值，并填充与angular 2组件上的PrimeNG数据表相同的值。
<p-dataTable [value]="ObjectArray">
<p-column field="label"></p-column>
<
浏览 0提问于2017-07-20得票数 1
我们是否可以在pdf中为文本创建占位符，并用id标记它们(类似于html标签)，然后使用PdfBox将我们的文本填充到占位符中，无论文本的长度是什么？
浏览 0提问于2018-04-09得票数 1
1回答
我正在使用primeng日程表，日历看起来很好，但事件没有显示，如下图所示。这个项目相当简单。只需使用primeng和schedule。没什么复杂的。我已经附上了我的代码。如果任何人以前遇到过这个问题，并有解决方案。您的帮助将不胜感激。非常感谢
angular.json
"styles": [
"src/styles.css"
],
"scripts": [
"node_modules/moment/min/moment.min.js",
"node_modules/fullcalenda
浏览 39提问于2018-08-30得票数 0
我用过它，但我不知道它能做什么！
还有跳到下一个PlaceHolder做什么？也不知道这个快捷键！
浏览 1提问于2013-12-31得票数 3
回答已采纳
2回答
相对较新的IOS & Xcode来自Android背景，我在一些教程中发现，在结束闭包时按回车键，并以一种特殊的方式对其进行Xcode格式化。然而，在我的例子中，这并不总是有效的。
输入之前和之后发生的事情是为我而按的
我所看到并希望它所做的事情。
本视频提到的另一个示例(开始于13.06，结束于13.16)
与其他IDE相比，目前Xcode的bug非常多，所以很难判断这只是一个bug，还是我做错了什么。有没有人能指导我如何实现这一点，或者为什么会发生这种情况？
浏览 1提问于2016-11-26得票数 2
1回答
Angular 2，v.2.0.0+ PrimeNG。我会像这样实现弹出菜单：
我使用此命令-> npm install primeng --save在我的项目中安装PrimeNG，并在我的app.module.ts -> import {TieredMenuModule} from "primeng/primeng"中导入TieredMenuModule。然后我创建组件并导入MenuItem -> import {MenuItem} from 'primeng/primeng'，以及来自node_modules的所有样式(当然是在我
浏览 2提问于2017-03-10得票数 0
回答已采纳
我正在与Angular-Meteor合作一个项目，它工作得很好。作为我的起点，我使用了。现在我想安装PrimeNG作为我的UI。关于的文档说，我需要一个像webpack或system.js这样的模块管理器来绑定依赖项。它们都不存在于angular-meteor项目中。我甚至不明白它是如何工作的，因为即使在Angular2页面上，样板示例也包含一个模块加载器。在Angular-Meteor基础示例中模块管理是如何工作的，以及如何添加PrimeNG。
谢谢
浏览 0提问于2016-11-15得票数 2
我从一个项目中创建了一个maven原型，在这个项目的pom文件中，有一个依赖关系演示-admin
<dependency>
<groupId>com.demo</groupId>
<artifactId>demo-admin</artifactId>
<version>${demo-admin.version}</version>
</dependency>
此依赖项安装在本地存储库中。
但是，当我检查生成的原型文件，即原型资源文件夹中的pom.xml文件时，依赖项如下所示
浏览 5提问于2020-12-21得票数 0
我在Struts2中有一个autocompleter标签。
当标签被放到自动补全程序上时，我有一些操作要做。
在焦点上，当我单击自动完成程序文本框时，文本Select or Type tag ends with ;将被删除。
如果我处理其他事件，文本应该会重新出现。
如何实现此功能？
<sj:autocompleter
cssStyle="width:200px;"
href="%{#autoCompleteTagUrl}"
onSelectTopics="tagsAllSele
浏览 1提问于2014-09-01得票数 0
1回答
我们使用SSRS (2008年R2)来表示来自几种语言的数据。我们使用带有Arial字体的标签。如果从数据库加载的字符不能由Arial表示，SSRS会自动将它们转换为包含特殊字符的相关字体。它适用于多种语言。然而，对于中文，默认的选择是字体MingLiu。这种字体在中国大陆很少见，当地人说它是不可用的。我想用SimSun字体代替。如何配置SSRS以强制SimSun而不是MingLiu？当然，我可以用SimSun字体创建新的标签，但这需要重新创建所有已经配置了Arial的现有报告。
谢谢
浏览 3提问于2017-11-30得票数 0
回答已采纳
1回答
我有一段代码，类似于以下内容。我正在尝试参数化给定的查询，并在IN子句之后放置一个列表。
public List<Map<String,Object>> parameterize(List<String> list) throws IllegalArgumentException {
String b = "SELECT * FROM table_name WHERE abc IN (:value)";
MapSqlParameterSource namedParameters = new MapSqlParameterSou
浏览 11提问于2016-04-06得票数 1
回答已采纳
我在服务器端做页面的认证和授权。在每个控制器的索引页上。但是在每个索引页中，我想使用angular 2，因此我想使用angular 2路由。
我试过像这样
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template:''
})
export class AppComponent {
}
app.module.ts
import {NgModule} from '@an
浏览 0提问于2016-10-15得票数 0
我创建了一个简单的扩展UISearchBar，它比本地的要小一些。我已经实现了这个代码：
- (void)layoutSubviews{
[super layoutSubviews];
CGRect frame = self.frame;
if (frame.size.height != 32) {
frame.size.height = 32;
self.frame = frame;
}
[[UITextField appearanceWhenContainedIn:[UISearchBar class], nil]
浏览 1提问于2015-10-14得票数 0
回答已采纳
1回答
我得把整个项目翻译成其他语言。我决定通过本地资源文件来做这件事。翻译将由外包公司提供excel文件。
手工翻译过程将按以下步骤执行：
为页面创建本地资源文件
对于页面上的每一个文本，
如果文本不是标签或不包含Id，=>格式文本将在标签内并具有id (因为资源文件只能使用asp.net控件)
添加注释到标签以使用资源文件
在资源文件中创建新项，并将其转换为该标签。
它将对项目中的每一页重复。正如您可能注意到的，对于大型项目，这将是非常无聊的过程。
我的第一个想法是创建/扩展名，它将接受excel文件并执行整个翻译
我的第二个想法是创建power she
浏览 3提问于2012-08-18得票数 2
1回答
我目前正在开发一个使用Angular 4，Angular Material和PrimeNG组件的用户界面。
我遇到的最新组件是来自PrimeNG的MultiSelect组件：
我只是想让组件的宽度适合父组件的100%。
编辑此组件的CSS类是否需要遵循特定的流程？文档中说对内联使用"Style“--这是不是意味着：
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100
浏览 6提问于2017-08-04得票数 4
回答已采纳
2回答
有没有办法在文本字段中使用HTML/CSS/JS放置图像，而不使用图像作为背景？该图像需要是可点击的，并定位在字段的右侧。谢谢。
浏览 1提问于2009-10-31得票数 0
回答已采纳
我想知道为什么在反应式的Angular中，当带有属性type='number'的输入标签为空时，它们的值是null，即使在原生HTML5中我们从来没有看到它们有null作为值。 角度反应形式的输入标签如下所示。 <mat-form-field appearance="outline">
<input matInput formControlName="min" type="number" />
</mat-form-field> 定义FormGroup的函数如下所示。 function
浏览 60提问于2021-09-28得票数 1
按照这个示例，我试图更改mat-form-field占位符的行为。有三种选择：auto、always和never。
这个特性确实是一个很好的特性，可以根据开发人员想要实现的占位符类型来使用。
实际上，它可以全局使用，直接将其传递给应用程序根目录的@NgModule：
@NgModule({
providers: [
{provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: {float: 'always'}}
]
})
并按以下方式构建视图：
<mat-form-field [floatLabel]="never&
浏览 0提问于2018-04-11得票数 5
回答已采纳
我正在寻找一个关于角度风格的解释。 我正在使用Angular 10和Prime-ng，我已经添加了一个自定义样式，它应该覆盖Prime-ng组件，但是当为应用程序提供测试时，样式不会覆盖它，它会将包含原始样式的标签直接放在
(1)包含要在p进度条(即高度: 10px；)上应用的css规则(在angular.json样式节点上注入)。
(2) Primeng组件的默认样式来自Primeng库，因为我在我的一个应用程序组件上使用了这个组件：
<p-progressBar [value]="value"></p-progressBar>
浏览 12提问于2021-08-25得票数 0
显然，我的目标是在使用angular指令之后，使<input type="text" placeholder="example" />元素看起来像<input type="text" [placeholder]="'example'" />
import { Directive, HostBinding } from '@angular/core';
@Directive({
selector: 'input[placeholder]'
})
expor
浏览 4提问于2018-02-22得票数 0
回答已采纳
我正在尝试创建类似于聚合物的浮动标签。在字段中键入时，占位符正在隐藏。
.numbrFldCls input::-webkit-input-placeholder {
transition: all 0.3s ease-in;
opacity: 1 !important;
-webkit-text-fill-color: red !important;
visibility: visible !important;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: i
浏览 0提问于2015-10-20得票数 0
回答已采纳
1回答
我有一个移动站点，它使用jQuery移动库和html5。在这个站点上，我使用占位符来标记输入(因为我隐藏了标签)。
然而，我们都知道IE是无能的，直到IE10才支持占位符，但我的客户希望它也能在IE9中工作(他为什么要在移动站点上支持这个功能，这是我无法理解的)。
我已经下载并安装了脚本的最新版本，但是占位符仍然没有出现。我需要做些什么才能让这件事成功吗？
我包含的脚本：
<script src="/Scripts/jquery-2.0.3.js"></script>
<script src="/Scripts/jquery.unobtru
浏览 0提问于2013-07-30得票数 1
回答已采纳
我是angular2/primeng的新手。
如何在数据表中显示primeng上下文菜单，而不是默认的右键单击？
谢谢
浏览 2提问于2017-08-21得票数 1
这是我的组件
import 'rxjs/add/operator/switchMap';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';
import {TaskService} from '../../services/task.
浏览 4提问于2017-04-20得票数 1
我需要什么
我有一个具有以下层次结构的scrollView：
ScrollView
。^ contentView(UIView)
。-^view1(黄色)
。-^view2(灰色)
view1(黄色)有一个固定的高度，被钉在contentView的顶部。除了高度view2之外，我已经指定了所有约束。因为我正在以编程的方式向view2(灰色)添加一个子视图，并且是随机高度的。
问题是我不知道如何设置view2的高度约束。为了计算contentSize，滚动视图需要有从上到下运行的约束。但是，view2的高度只有在添加子视图之后才会固定，当然，这将具有确定高度的所有必要约束。
我
浏览 2提问于2015-09-30得票数 0
回答已采纳
我正在与angular2项目合作角-cli。今天，我将下面的版本更新为2.4.1。
"@angular/common": "~2.4.1",
"@angular/compiler": "~2.4.1",
"@angular/compiler-cli": "^2.4.1",
"@angular/core": "~2.4.1",
"@angular/forms": "~2.4.1",
"@angular/http":
浏览 0提问于2016-12-29得票数 43
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
