- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我目前正面临一个关于 mat-chip-list with 和 inputs 的奇怪问题。我有一个包含两个表单控件的表单组:联系人和姓名。
this.form = this.formBuilder.group({
name: ['', [Validators.required]],
contactIds: ['', [Validators.required]]
})
此表单的 View 如下所示:
<mat-form-field #contactsChipList>
<mat-chip-list>
<mat-chip *ngFor="let contact of contacts" [removable]="removable" (remove)="removeChipListItem(contact)">
{{ contact.name | titlecase }} {{ contact.surname | titlecase }}
<mat-icon matChipRemove *ngIf="removable"></mat-icon>
</mat-chip>
<input [matChipInputFor]="contactsChipList" placeholder="Contacts" formControlName="contactIds" />
<mat-error *ngIf="form.hasError('required', 'contactIds')">This field is required</mat-error>
</mat-chip-list>
</mat-form-field>
问题:当我从输入字段中删除所有元素时,父表单 (formGroup) 被标记为无效,但 formGroup 的错误属性不包含任何值。所以错误永远不会显示。
其他尝试:但是当我使用带有 matInput 属性但没有 mat-chip-list 的普通输入元素时,当我删除输入字段的内容时错误会正确显示。
在这种情况下,标记如下所示:
<div class="form-group">
<mat-form-field>
<input matInput placeholder="Contacts" formControlName="contactIds" />
<mat-error *ngIf="form.hasError('required', 'contactIds')">This field is required</mat-error>
</mat-form-field>
</div>
假设:我现在认为问题在于 mat-chip-list 元素。我试图调查: @Input()errorStateMatcher: ErrorStateMatcher
但我还不确定如何使用。 Google 对该搜索不友好。
有人遇到过这个问题吗?如果您需要说明,请告诉我。
最佳答案
您应该在 <mat-chip-list>
中添加验证器并防止无效项目添加如下。
组件:
export class ExampleComponent {
items = [];
emailFormControl = new FormControl('', [Validators.email]);
addItem(event) {
if (this.emailFormControl.valid) {
items.push(event.value)
}
}
.
.
.
}
模板:
<mat-form-field>
<mat-chip-list [formControl]="emailFormControl">
.
.
.
</mat-chip-list>
</mat-form-field>
已编辑:看来你用的是FormGroup
.您必须添加 ngDefaultControl
到 mat-chip-list
如下。可以看看很好的解释here .
<mat-form-field>
<mat-chip-list ngDefaultControl [formControl]="form.controls.contactIds">
.
.
.
<mat-error *ngIf="form.controls.contactIds.hasError('required', 'contactIds')">This field is required</mat-error>
</mat-chip-list>
</mat-form-field>
关于输入未显示验证错误的 Angular Material 垫芯片列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49880051/
您好,在我的 android 项目中,我计划使用 TwinLinx Mymax NFC 芯片来启用任何手机的 nfc。但我不知道手机如何使用蓝牙与 nfc 芯片通信。我认为他们会为此提供一些 sdk
我想在我的应用程序中实现一个带有芯片的自动完成编辑文本,我想以一种在这里完成的方式来完成它:material design chips .首先,我想问一下是否有某种小部件(可能是新支持库的一部分)或我
我想知道不同种类的复位以及芯片中的定义。最好冷,暖,系统,应用,开机复位。 同样,对于它们每个的简单示例也受到高度赞赏。 谢谢。 最佳答案 不知道您到底想了解什么。重置可以并且可以以多种不同的方式和方
是否可以在按下按钮后开始从 nfc 芯片读取数据。按下按钮后,应该会出现一条消息,例如“请将您的 nfc 芯片靠近设备……”。我只看到教程,它展示了如何在设备上拿着 nfc 芯片时启动应用程序 (on
我看到一些问题在垂直堆叠 md-chips 的同时保持输入顶部,但我想将 md-chips 堆叠在输入行下方,就像它在 google 和 pinterest 中的情况一样 我希望输入字段位于顶部,筹码
我的应用程序中有一个表单,我在其中使用了来自 Primafaces 的以下代码: ...other inputs... Tags 我能够正确显示 Chip 元素,但我想设置其宽度为 100% 和高度
我正在使用 primefaces 并使用元素“chips”引入多封电子邮件,我验证了它们的格式,如果验证是,我试图将“气泡”的样式更改为 ui-state-error错了 我的筹码:
您好,我是android新手,正在学习使用material chips。我创建了一个测试项目并添加了以下内容 我添加到我的 gradle 文件中 implementation 'com.android
我尝试在 Apple M1 chip 上运行 android 模拟器MacBook 但它不起作用,并且 AVD 管理器显示错误消息:无法启动 AVD .这个问题的根源似乎是 M1 芯片不支持虚拟化,而
我想使用material-ui chips在我的 react 应用程序中。问题是我想通过拖放来移动芯片。 material ui 不支持此功能。是否有解决方法/扩展来使芯片可拖动? 查看完整示例:h
我正在使用materializecss编写一个表单字段,其中包含带有自动完成选项的mat-chips。这个想法是每当添加新芯片时就发出 PATCH 请求。以下是我当前使用的代码片段: $('#tag-
我正在使用materializecss编写一个表单字段,其中包含带有自动完成选项的mat-chips。这个想法是每当添加新芯片时就发出 PATCH 请求。以下是我当前使用的代码片段: $('#tag-
继续:EMV Reading PAN Code 我正在使用 C 语言,所以我没有 Java 工具和自动解析 APDU 命令响应的所有函数。我想读取所有类型的智能卡。我必须解析 GET PROCESSI
我正在寻找与 NDEF 兼容并为大多数运行 Android 4.x 的设备所支持的 NFC 芯片,不知何故我只能找到很少的相关信息。谁能说出制造商/芯片型号或提供一些有用的链接? 最佳答案 参见 ht
我不知疲倦地尝试在表格 View 单元格中创建一个“芯片”布局,其中单元格的高度会扩展以填充内容,但没有成功。 我的研究让我找到了这个图书馆 https://github.com/zoonooz/ZF
我已经开始在我的应用程序中使用 Angular Material。我正在使用 md-chips 控件,我想以从右到左的方向显示它。(右侧的筹码和左侧的占位符)我查看了 angular-material
我在 android 上遇到芯片组件问题。我尝试实现这样的芯片: 但是当我启动我的应用程序时出现此错误: android.view.InflateException: Binary XML
我有一个 CRUD,我想更改 inputTexArea: 新的 Primefaces chips 组件: 实体类摘录: @Lob @Size(max = 2147483647) @Column(n
我有一堆由 ngFor 循环生成的 ionic 芯片。我使用 tagDefaultColor 添加了选择所有 ionic 芯片功能多变的。现在,当我想选择单个 ionic 芯片时,它会选择所有这些。
我已经在网上查看过,讨论/示例似乎是针对传统软件开发的。由于Verilog和VHDL(用于芯片设计,例如FPGA和ASIC)与软件开发C和C++类似,因此似乎很有意义。但是,它们在本质上是并行的并且需
我是一名优秀的程序员,十分优秀!