如果列表为空，如何禁用mat-form-field或mat-autocomplete？
如果列表为空，禁用mat-form-field或mat-autocomplete可以通过以下方式实现：
- 对于mat-form-field，可以使用disabled属性来禁用整个表单字段。例如：
<mat-form-field>
<input matInput [disabled]="isListEmpty()" placeholder="Placeholder">
</mat-form-field>在上述示例中，isListEmpty()是一个返回布尔值的函数，用于判断列表是否为空。如果列表为空，disabled属性将被设置为true，禁用表单字段。
- 对于mat-autocomplete，可以使用MatAutocomplete组件的disable属性来禁用自动完成功能。例如：
<mat-form-field>
<input matInput [matAutocomplete]="auto" placeholder="Placeholder">
<mat-autocomplete #auto="matAutocomplete" [disabled]="isListEmpty()">
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>在上述示例中，isListEmpty()函数用于判断列表是否为空。如果列表为空，disable属性将被设置为true，禁用自动完成功能。
需要注意的是，以上示例中的isListEmpty()函数需要根据具体情况进行实现，以判断列表是否为空。另外，这里没有提及具体的腾讯云产品和链接地址，因为腾讯云并没有直接相关的产品与此问题对应。
相关·内容
如果源列表为空，我想禁用mat-form-field和/或mat-autocomplete。我在mat-form-field上尝试过disable="true" (disable=list.empty)，但不起作用。 这是stackblitz：https://stackblitz.com/angular/dnbdkokmnelo?file=app%2Fchips-autocomplete-example.html 如果水果列表是空的怎么办？ 我在找像disabled mat-select这样的东西... https://stackblitz.com/angular/rkdgk
浏览 20提问于2019-10-10得票数 1
回答已采纳
5回答
我有以下关于角材料的autocomplete：
<!-- Drop Down menu -->
<mat-form-field>
<input placeholder="Select one" [matAutocomplete]="auto" matInput>
<mat-autocomplete #auto="matAutocomplete">
<mat-option value="C
浏览 0提问于2019-07-02得票数 4
回答已采纳
问题是，当我通过在input字段中键入字符来搜索用户列表时，mat-autocomplete会找到搜索到的用户，在我单击该用户以选择该用户后，input字段将变为空，而不是显示所选的用户。
下面是我的HTML代码：
<div class="material-input">
<mat-form-field class="form-group">
<input id="userNameInput" matInput placeholder="Search user name"
浏览 9提问于2019-10-30得票数 0
回答已采纳
3回答
如何使mat-option自动选择列表中最长项的宽度。 <div class="col-md-3">
<mat-form-field class="sm-width" appearance="outline">
<mat-label>Дом</mat-label>
<input (input)="InputBuilding($event)" matInput placeholder="№ дома" formControlName="
浏览 24提问于2019-06-20得票数 0
我最近开始学习角度和角度的材料，我想不出一种方法，把滚动条添加到一个扩大的输入字段的垫芯片列表。我的输入字段是可编辑的，同时也使用自动完成列表来填充数据.我尝试过类似的答案，要求你编辑CSS，但没有一个对我有用。我需要芯片出现在一个单行与水平滚动。现在，输入字段的大小只是为了容纳芯片。
我的代码片段：
<!--Keyword section-->
<mat-form-field class="ranking-chip-list">
<mat-chip-list #chipList>
浏览 7提问于2020-08-16得票数 0
回答已采纳
根据文档中的示例，我正在使用带有输入的mat-autocomplete组件，并且我已经使用占位符和formControlName配置了输入，如下所示：
<mat-form-field class="example-full-width">
<input type="text" placeholder="Persona*" aria-label="Number" matInput formControlName="idPersona"
[matAutocomplete]="a
浏览 6提问于2021-02-03得票数 0
我有一个modal，里面有angular-material autocomplete。它的html是这样的
<mat-form-field class="example-full-width dummy-input-field" floatLabel="never">
<input matInput class="custom-input" (blur)="getValue()" [matAutocomplete]="auto" [formControl]="stateCtrl
浏览 4提问于2019-11-18得票数 1
我无法访问typescript文件中的表单数组值。我以空数组的形式获取它这是我的html代码 <mat-form-field class="example-full-width" >
<mat-label>Locations </mat-label>
<mat-chip-list #chipList aria-label="Fruit selection">
<mat-chip
浏览 12提问于2020-10-17得票数 0
我有一个mat-autocomplete列表框。问题是当我从列表框中选择任何选项时，它不会在输入框中显示任何内容。
<form [formGroup]="SForm" id="Form" style="width:100%;height:70%" (ngSubmit)="onSubmit()">
<mat-form-field>
<input type="text" placeholder="Direction" aria-label="
浏览 2提问于2018-08-23得票数 1
回答已采纳
我正在尝试根据下拉列表的选定值自动填充输入字段。以下是代码，它不能工作。请提个建议。 <form [formGroup]="employeeForm" (ngSubmit)="OnSubmit()">
<mat-form-field appearance="outline">
<mat-label>Employee ID</mat-label>
<input type=&#
浏览 9提问于2021-01-16得票数 0
6回答
似乎<mat-autocomplete>宽度总是我们要输入的输入的宽度。没有办法让它变大吗？我有一个非常小的输入，不能阅读下拉项目。我的形式空间也是有限的，所以不能使输入更大。
<mat-form-field style="width: 100px;">
<input matInput [matAutocomplete]="auto">
<mat-autocomplete style="width: 500px;" #auto="matAutocomplete">
&
浏览 2提问于2018-03-11得票数 35
回答已采纳
我正在使用覆盖模块的角的CDK与垫-自动完成。
场景：有带有cdk虚拟滚动的mat-自动完成输入框，下面有两个按钮。Inputbox是用下拉列表中的一个值预选的。
问题:如果我们从mat-自动完成输入中选择整个文本/双击默认选定的文本，然后单击下面完全取消该文本(在该按钮上/上面)，我无法单击按钮。
分析调试：如果我们点击输入它打开透明的cdk覆盖层，没有结果。如需参考，请参阅附加的img，为了了解我已经设置了覆盖背景为黄色，因为这个覆盖，我们不能点击按钮。
<span>
<mat-form-field class="view-field">
浏览 6提问于2019-12-31得票数 2
我的HTML中有n个自动完成，如下所示：
<mat-form-field style="padding-left: 10px" floatLabel="never">
<input type="text"
matInput
[matAutocomplete]="auto"
formControlName="person">
<mat-label>Search Labor</mat-label>
<mat-autocomplet
浏览 3提问于2020-03-11得票数 0
回答已采纳
我正在将一个应用程序从AngularJS升级到角形5。我已经解决了大部分问题，但仍在学习过程中，我无法找到将自动完成列表连接到后端的最佳方法。材料设计网站也没有提到这一点。
下面是代码现在的样子：
<mat-form-field>
// chips are up here
<mat-autocomplete (optionSelected)="chipAdd($event,field)" #auto="matAutocomplete">
<mat-option [value]="opt.i
浏览 0提问于2017-11-11得票数 0
回答已采纳
是否有用于mat-autocomplete的mat-option事件。
HTML代码如下：
<mat-form-field>
<input type="text" placeholder="Search......." aria-label="Number" style="text-transform: uppercase"
matInput formControlName="myControl" [matAutocomplete]="auto">
&
浏览 3提问于2018-12-13得票数 2
1回答
我正在处理一个表单，过滤记录的结果，有两个文本字段是mat-自动完成和一些复选框。
单击Apply filter时，将字段的值插入对象并将其推送到数组中。
然后重新设置表单。
我的情况是，当字段为空时，我不希望填充对象。
第一次很好，工作正常，但是在下一次迭代中，我得到了“无法得到空的修剪”(在字段上使用.trim() )。
HTML：
<div class="col-6">
<div class="form-group">
<mat-form
浏览 0提问于2018-04-17得票数 0
回答已采纳
我在试着禁用角质材料自动完成组件。我本来希望能够在输入上设置disabled，但这没有任何作用。(我还尝试在mat表单字段和mat自动完成上设置disabled。)在输入上设置matAutocompleteDisabled会阻止选项的显示，但仍然允许在字段中输入。在输入上设置readonly可以阻止输入，但它不会改变UI，因此这似乎会使用户感到困惑。这是个窃听器还是我漏掉了什么？
到目前为止，我使用readonly的距离最近(而且禁用功能不像预期的那样工作)
<form class="example-form">
<mat-form-field class
浏览 4提问于2020-07-30得票数 1
回答已采纳
我正在制作一个搜索栏，并在mat-form-field中添加了一个mat-autocomplete。输入字段超出了搜索栏的范围，如下所示 📷 这是代码HTML： <div class="search-bar">
<mat-icon>search</mat-icon>
<form class="example-form">
<mat-form-field class="example-full-width" appearance="fill"
浏览 25提问于2021-08-23得票数 0
回答已采纳
使用Angular 8和material。使用reactive表单。除了自动完成的字段外，我还可以使用formControl获取所有其他字段。
<mat-form-field>
<input type="text"
formControlName="analysisDescription"
placeholder="Analysis Description"
matInput [formControl]="myControl"
[matAutoco
浏览 0提问于2019-06-14得票数 0
回答已采纳
问题
如何将多个文本输入链接到一个
用例
给定一个具有多个耦合字段的表单:电话号码(<input>)；电话描述/标签(<input [matAutocomplete]>)。用户应选择先前输入的电话说明/标签之一。
技术挑战
根据，<mat-autocomplete>和<input>必须相互引用。
<mat-form-field>
<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto&#
浏览 0提问于2018-07-24得票数 3
回答已采纳
我允许用户动态创建输入字段。对于这些输入域中的每一个，我希望将其连接到不同的mat-autocomplete，以便它们彼此独立地工作。我在这里遇到了麻烦，因为我不能动态地创建连接自动完成和输入的元素引用(这里是#auto)。我该如何实现这一点？
<div
class="row"
*ngFor="let field of getControls('requestFields'); let i = index"
formArrayName="requestFields"
>
<ng-container
浏览 5提问于2018-08-02得票数 4
1回答
我正在建立一个应用程序，我有垫-自动完成。我只想在输入文本字段中输入特定文本时才显示搜索的列表。我试过一些方法，但没有运气
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Assignee</mat-label>
<input type="text" matInput [formControl]="myControl" [matAutocomplete]=&#
浏览 1提问于2021-07-30得票数 0
回答已采纳
1回答
嗨，在我的angualr7应用程序中使用的是角材料自动完成组件，并且正在研究如何将一个值从api响应绑定到它。有谁能提供解决办法来解决这个问题？
HTML：
<mat-form-field>
<input type="text" [(ngModel)]="templateId" name="templateId" #templateId="ngModel" placeholder="Template" matInput
[matAutocomplete]="auto
浏览 1提问于2020-07-06得票数 0
我有两个组成部分。当我从另一个自动完成下拉列表中选择值时，我需要将数据从父组件传递给自动完成组件。这是我附加的密码。请帮助我找到解决这个问题的办法。
Parent Component Html
<div class="col-md-6">
<mat-label>Name<span class="astric">*</span></mat-label>
<mat-form-field appearance="outline"
浏览 3提问于2022-07-12得票数 -1
2回答
每当用户开始搜索将调用HTTP服务并获取响应并显示在下拉列表中的内容时，我就会有一个场景。
我有下面的代码，这是很好的工作与上述方法。但是，在单击下拉列表中列出的任何选项后，ngmodelchange方法再次调用哪个方法再次获取服务。不应该发生这种事。
我在哪里失踪了？
<mat-form-field class="half-width">
<input matInput aria-label="State" name="state" placeholder="Search by number (
浏览 1提问于2019-02-22得票数 0
回答已采纳
当我在下面的matAutocomplete formControl中选择一个项时，我总是得到ID，而不是下拉列表中显示的值。
当我将value=" baseCoin.ID“更改为value=" baseCoin.Abbr”时，在选择项时会显示正确的字符串，但是，需要(ngModelChange)事件将baseCoin.ID返回给方法，而不是baseCoin.Abbr。
<mat-form-field>
<input matInput placeholder="Base Coin" aria-label="Base Coin
浏览 0提问于2018-02-13得票数 3
回答已采纳
在角度上，我做了一个自动完成的芯片组件。当用户选择删除或添加项时，建议列表将消失，输入字段将为空。
与这种行为不同，我希望保持自动完成列表打开(或者再次打开它)，这样用户就不需要通过输入字段来触发它。
因此，当前，在用户开始打字时就打开了自动完成程序；
芯片-列表。组件。
constructor() {
this.filteredItems = this.itemCtrl.valueChanges.pipe(
map((item: string | T) => {
if (typeof item === 'string') {
r
浏览 3提问于2020-11-06得票数 1
当按tab键时，我们如何选择mat选项？，它应该像mat中的enter按钮一样工作-自动完成角度6.在下面的URL，它的工作时按回车，但每当我们按下标签按钮，它应该选择高亮显示的选项。
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocompl
浏览 2提问于2019-03-08得票数 7
回答已采纳
1回答
发行说明：
我定义了多个mat-autocomplete，如下所示，使用几乎相同的代码从多个列表中获取数据。
<div class="col-md-4">
<mat-form-field class="example-full-width">
<mat-label>Level</mat-label>
<input matInput name="level" aria-label="Level" [matAutocomplete]="auto"
[(
浏览 0提问于2021-03-19得票数 3
回答已采纳
其中一位朋友正确地指出了使用property @input，如所示。我想应用新的样式并改变mat-autocomplete的宽度，.So的下拉宽度仍然很大。
我是新的角，我不知道如何使用这个属性，但这里是我的尝试，这是无效的。
compoenent.ts
@Input() panelWidth: string | number;// I tried initializing this here for ex:50px, gives error
尝试将属性作为属性应用于mat-自动完成，如下所示
<mat-autocomplete panelWidth ="170px"
浏览 1提问于2019-11-22得票数 0
回答已采纳
1回答
Mat-自动完成多个字段
、、、、
我正在使用Mat-Autocomplete，但由于某种原因，它只在我使用一个字段时才能工作，当我添加另一个字段时，会发生一些奇怪的事情。
在字段1和字段2中，我在下拉列表中得到了相同的选项，这些选项只有在我编辑字段2时才能使用。
有没有可能有一个以上的领域，我从来没有看到任何例子这件事。
FIELD1
<div class="col input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">
浏览 0提问于2018-12-17得票数 3
回答已采纳
1回答
我正在使用Angular Material Autocomplete来列出基于远程API的搜索结果(过滤是在远程端完成的)。
HTML方面：
<mat-form-field class="full-width">
<input type="text" placeholder="Brand" aria-label="Number"
matInput [formControl]="formControl" [matAutocomplete]="auto">
浏览 0提问于2018-01-04得票数 4
回答已采纳
我正在做一个简单的自动完成输入字段与关闭按钮在结束时，将清除该字段 <mat-form-field>
<input matInput type="text">
<button matSuffix mat-icon-button>
<mat-icon>close</mat-icon>
</button>
<mat-autocomplete>...</mat-autocomplete>
</mat-form-field> 但是
浏览 44提问于2019-03-14得票数 1
我使用自动完成角材料来列出从REST加载的选项，但是我的列表没有显示任何内容，并且是空的，但是在开始键入之后，它会显示列表。
我使用getData()函数从API获取数据并填充options数组，但是我认为列表不会被填充，因为options是数组，filteredOptions是可观察的，filteredOptions稍后会填充。我不知道怎么修好它。
当我单击输入字段时，我希望看到列表，但它是空的。
这是我的密码：
html:
<form class="example-form">
<mat-form-field class="example-fu
浏览 7提问于2022-09-03得票数 0
2回答
我工作的角度4材料，特别是自动完成组件。
我的选项列表filteredHomeTeams类型为Observable< Team >，我正在使用这样一个名为teamName的对象的属性构建下拉列表和选择
下面是HTML：
<mat-form-field class="example-full-width">
<input type="text" matInput placeholder="Local" [formControl]="HomeTeamCtrl" [matAutoco
浏览 4提问于2017-10-22得票数 3
回答已采纳
我使用的是Angular Material 7.3.7，我有一个类似于documentation的简单的自动补全 <form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [mat
浏览 16提问于2019-06-13得票数 0
回答已采纳
我有一个属性列表，其中一些包含用于上标或下标的HTML标记。我能够在角度材质MatAutoComplete列表中正确显示这些值。我找不到一种方法来正确显示用户的MatOption选择。换句话说，用户选择显示这些标记的原始HTML。下面是我的组件的相关HTML。任何帮助都将不胜感激。谢谢!
<mat-form-field>
<input type="text" aria-label="Number" matInput formControlName="property" [matAutocomplete]= "proper
浏览 0提问于2020-03-31得票数 0
我想实现一个组件或指令，用于角材料。但是，我很难弄清楚如何在仍然公开输入元素的同时封装业务逻辑并将其连接起来，因此很容易设置样式和添加可访问性。
理想情况下，我希望有一个指令，我可以添加到输入，但我的理解是，您需要实例化<mat-autocomplete>组件。因此，我尝试创建一个组件来实例化<mat-option>列表。
@Component({
selector: 'employee-search',
exportAs: 'employeeSearch',
template: `
<mat-option *n
浏览 5提问于2017-11-01得票数 3
回答已采纳
我用过垫-自动完成与角质材料7。
this.salesPickerAutoComplete$ = this.autoCompleteControl.valueChanges.pipe(
startWith(''),
debounceTime(400),
distinctUntilChanged(),
switchMap(value => {
if (value && value.length > 2) {
return this.getSalesReps(value);
} else {
ret
浏览 1提问于2019-04-01得票数 0
我用的是自动垫子。
<form class="example-form">
<mat-form-field class="example-full-width">
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
<mat-aut
浏览 0提问于2018-06-11得票数 1
1回答
在我的类中，我有一个名为"curSelectedSite“的属性，默认情况下该属性设置为null：
export class MyComponent implements OnInit {
curSelectedSite = null;
displayFn(site): string {
this.curSelectedSite = site;
return site ? site.name : site;
}
addSite(): void {
console.warn(this.curSelectedSite) // outputs
浏览 3提问于2017-12-12得票数 0
回答已采纳
这可能是一个愚蠢的问题，有一个非常简单的答案，但经过一周的编码，我感到油炸，并没有弄清楚。
如何绑定到所选内容的Id，但显示值的字符串表示形式？也就是说，我有一个显示客户姓名的下拉列表，但是我想为了DB的目的保存Id。
我的选择项有两个属性：customer.Display (名称)和customer.Id。
如何通过绑定将Id保存到[(ngModel)]="loadDataService.selectedLoad.CustomerId**，，但在下拉菜单中显示显示(它已经显示了显示内容)：**
<mat-form-field>
<input type=
浏览 0提问于2018-03-09得票数 0
回答已采纳
我尝试使用<mat-autocomplete>的角度材料(而不是AngularJS)，而不使用反应形式。但他们的例子都使用反应形式..。
我想做的是：
当在mat-input中输入某些内容时，进行Ajax调用以检索用户列表。
显示自动完成中的用户列表(显示用户名)，但将用户存储为模型
当模型发生变化时，调用我选择的函数。
现在，我做那些疯狂的事情(我说疯狂，因为它似乎很多)。
<mat-form-field fxLayout>
<input type="text"
matInput fxFlex=&
浏览 0提问于2018-01-29得票数 21
我正在编写一个实时搜索功能，用RxJS填充自动完成的下拉列表。我收到了一些错误，因为TypeError:无法读取未定义的属性“管道”。代码运行良好，但如果用户删除整个搜索字符串，则抛出以下错误
TypeError:无法读取未定义的属性“管道”(create-request.component.ts:62) at SwitchMapSubscriber._next (switchMap.js:30) at SwitchMapSubscriber.next (Subscriber.js:49) at TapSubscriber._next (tap.js:46) at TapSubscriber
浏览 3提问于2021-03-20得票数 1
我有一个包含输入的mat-form-field和一个包含mat-option的mat-autocomplete。输入具有(模糊)事件，而mat-option具有(onSelectionChange)事件。
我遇到的问题是，当我选择一个项目时，模糊是在mat-option的onSelectionChange事件之前调用的。如果下拉列表中不存在值，则blur事件的方法将清空输入。如果我删除了输入的(模糊)事件，那么(onSelectionChange)就会被调用。我需要在(模糊)事件之前调用它。
经过一些研究，我发现我可以在(onSelectionChange)的函数中使用模糊，这允许它的主体在(
浏览 1提问于2018-10-23得票数 5
回答已采纳
我是一个新的角度材料设计，我有一个问题的mat-autocomplete的动态输入。默认情况下，用户会看到一个输入，但当某些值被选中时，可以添加另一个输入，这是一个棘手的部分-如何使所有这些输入只使用一个mat-autocomplete？有可能吗？
下面是我使用mat-autocomplete的代码。addItem()函数正在添加另一个输入，该输入将被绑定到相同的mat-autocomplete。应该把它移到上面吗？那么唯一的id是什么呢？如何在多个输入连接到同一mat-autocomplete的情况下解决此问题？
<div formArrayName="items" c
浏览 0提问于2018-07-17得票数 2
如何在角度模板驱动的表单中设置过滤器与垫自动选择。 <mat-form-field class="pl">
<input matInput name="item_id"
[(ngModel)]="stock.item_id"
#item_id="ngModel"
placeholder="Item"
[matAutocomplete]="auto" required>
<mat-autocom
浏览 15提问于2019-06-08得票数 0
回答已采纳
有人能帮我在ngFor中创建动态模板引用变量吗，下面是我的代码
这里，我想使用带有mat-autocomplete #auto="matAutocomplete“的matAutocomplete="auto”，这是基于我的ngFor动态实现的
<div class="col" *ngFor="let item of formItems;">
<mat-form-field>
<input type="text" placeholder="{{it
浏览 19提问于2020-05-11得票数 0
这适用于常规的datalist元素，其中input元素上的list="target"可以在子组件中找到id="target"。我正在尝试找出一种使用material autocomplete组件来实现此目的的方法。
使用常规的datalist元素
parent.component.html
<input type="text" list="target">
<app-child></app-child>
child.component.html
<datalist id="ta
浏览 3提问于2020-04-04得票数 4
回答已采纳
这是我的html，其中包含的材料自动完成。
<ng-container *ngSwitchCase="'autocomplete'">
<div [ngClass]="(filter.cssClass || 'col-md-4') + ' mt-2 pt-1'">
<div class="filter-key-label">
{{filter.columnTitle}}
</div>
浏览 1提问于2018-04-19得票数 10
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
