模板驱动形式的Angular Material Mat-Chip验证

Question

我将Angular 6与Angular Material 6一起使用。我想要求垫芯片领域。当我输入mat-chip字段时，保存按钮将被启用，否则将被禁用。输入字段是必需的，但不能要求垫芯片字段。请帮我找到解决方案。谢谢

我的示例代码链接在这里：stackblitz演示

Answer 1

在保存按钮中，您可以使用已经禁用的属性，但应该是这样的：

[disabled]="company_name === undefined || fruits.length === 0"

对于其他来问这个问题的人：

您可以使用另一个很棒的包来验证您的标签，它的名称为ng-chips。

Git Repo：github.com/Gbuomprisc/ngx-chips

在线演示：angular-mfppay.stacklitz.io

Answer 2

解决方案

HTML:

<form #sampleForm="ngForm">
<mat-form-field class="example-chip-list">
<input matInput placeholder="Company Name" required="true" name="company_name" [(ngModel)]="company_name">
</mat-form-field>
<mat-form-field class="example-chip-list">
<mat-chip-list #chipList>
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable" [removable]="removable" (removed)="remove(fruit)">
{{fruit}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="New fruit..." #fruitInput [formControl]="fruitCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="add($event)">
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
{{fruit}}
</mat-option>
</mat-autocomplete>
</mat-form-field>

<button fxFlex="30" mat-raised-button color="primary" [disabled]="!sampleForm.form.valid || company_name === undefined || fruits.length === 0">Save</button>
</form>