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

Question

我正在使用 Angular 6 和 Angular Material 6。我想需要 mat-chip 字段。当我输入 mat-chip 字段时，保存按钮将被启用，否则将被禁用。输入字段是必需的，但不能要求 mat-chip 字段。请帮助我找到解决方案。谢谢。

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

Answer 1

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

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

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

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

Git 回购：github.com/Gbuomprisco/ngx-chips

在线演示：angular-mfppay.stackblitz.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>