Question

我正在将Angular 6与Angular Material 6一起使用。我需要使用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

Solution

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>

模板驱动形式的角材料材料芯片验证

2 个答案:

对于其他人提出这个问题：