首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >模板驱动形式的角材料垫片验证

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

Stack Overflow用户
提问于 2018-07-16 03:46:11
回答 2查看 3.6K关注 0票数 0

我用的是角质6和角质材料6,我想要的是片场.当我输入mat芯片字段时,保存按钮将被启用,否则将被禁用。输入字段是必需的,但不能要求mat芯片字段.请帮我找到解决办法。谢谢。

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-16 04:09:30

在“保存”按钮中,可以使用已禁用的属性,但应该如下所示:

代码语言:javascript
运行
复制
[disabled]="company_name === undefined || fruits.length === 0"

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

您还可以使用另一个很好的包,它可以为您的标签提供验证,它的名称是ng-chips

Git Repo:github.com/Gbuomprisco/ngx chips

在线演示:角-mfppay.stackblitz.io

票数 5
EN

Stack Overflow用户

发布于 2018-07-16 04:34:17

解决方案

HTML:

代码语言:javascript
运行
复制
<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>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51354319

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档