typescript 输入未显示验证错误的角形材料垫芯片列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49880051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular material mat-chip-list with input not showing validation error
提问by Gltheitroade
I'm currently facing a strange issue with mat-chip-list with and inputs. I have a form group that has two form controls: contacts and name.
我目前正面临一个带有输入的 mat-chip-list 的奇怪问题。我有一个表单组，它有两个表单控件：联系人和姓名。
this.form = this.formBuilder.group({
name: ['', [Validators.required]],
contactIds: ['', [Validators.required]]
})
The view for this form looks like this:
此表单的视图如下所示：
<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>
Problem:When I remove all the elements from the input field, the parent form (formGroup) is marked as invalid but the error property of the formGroup does not contain any values. So the error never shows.
问题：当我从输入字段中删除所有元素时，父表单 (formGroup) 被标记为无效，但 formGroup 的错误属性不包含任何值。所以错误永远不会显示。
Other attempt:But when I use a normal an input element with a matInput attribute without a mat-chip-list the error is displayed properly when I remove the content of the input field.
其他尝试：但是当我使用带有 matInput 属性而没有 mat-chip-list 的普通输入元素时，当我删除输入字段的内容时，错误会正确显示。
Here's what the markup looks like in that case:
在这种情况下，标记如下所示：
<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>
Assumption:I now believe that the issue lies with the mat-chip-list element. I tried to look into:
@Input()errorStateMatcher: ErrorStateMatcherbut I am not sure how to use yet. Google hasn't been friendly with that search.
假设：我现在认为问题在于 mat-chip-list 元素。我试图调查：
@Input()errorStateMatcher: ErrorStateMatcher但我还不确定如何使用。谷歌对该搜索并不友好。
Has anyone experienced this issue? If you need clarifications, let me know.
有没有人遇到过这个问题？如果您需要说明，请告诉我。
回答by Junx
You should add the validator in <mat-chip-list>and prevent invalid item adding as follows.
您应该<mat-chip-list>按如下方式添加验证器并防止添加无效项。
Component:
零件：
export class ExampleComponent {
items = [];
emailFormControl = new FormControl('', [Validators.email]);
addItem(event) {
if (this.emailFormControl.valid) {
items.push(event.value)
}
}
.
.
.
}
Template:
模板：
<mat-form-field>
<mat-chip-list [formControl]="emailFormControl">
.
.
.
</mat-chip-list>
</mat-form-field>
Editted:It seems that you use FormGroup. You have to add ngDefaultControlto the mat-chip-listas follows. You can read a good explanation here.
编辑：看来您使用FormGroup. 你必须添加ngDefaultControl到mat-chip-list如下。你可以在这里阅读一个很好的解释。
<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>
