代码之家 › 专栏 › 技术社区 › Jeremy Thomas

离子2:风格离子选择与验证

ionic-framework angular css html javascript

Jeremy Thomas · 技术社区 · 7 年前

<ion-select> 输入,但无法使其工作。似乎爱奥尼亚自动添加了 ng-invalid ion-select DOM元素,但 <label> 因为输入在DOM中是上游的,所以我无法对其进行样式设置。

我的html:

<ion-item>
    <ion-label>Type of Weigh In</ion-label>
    <ion-select [(ngModel)]="check_in.type_of_weighin" name="type_of_weighin" interface="action-sheet" required #type_of_weighin="ngModel">
        <ion-option value="standard">Standard</ion-option>
        <ion-option value="LM">Limited Maintenence</ion-option>
        <ion-option value="FM">Full Maintenence</ion-option>
    </ion-select>
</ion-item>

渲染DOM:

<ion-item class="item item-block item-ios item-select input-has-value">
    <div class="item-inner">
        <div class="input-wrapper">
            <ion-label class="label label-ios" id="lbl-103">Type of Weigh In</ion-label>
            <ion-select interface="action-sheet" name="type_of_weighin" required="" class="select select-ios ng-untouched ng-pristine ng-invalid">
                <div class="select-placeholder select-text"></div>
                <div class="select-icon">
                    <div class="select-icon-inner"></div>
                </div>
                <button aria-haspopup="true" class="item-cover" ion-button="item-cover" id="sel-103-0" aria-labelledby="lbl-103" aria-disabled="false" style="transition: none;"></button>
            </ion-select>
        </div>
    </div>
    <div class="button-effect"></div>
</ion-item>

< ?

1 回复 | 直到 7 年前

SimplyComplexable 7 年前

考虑到ionic所做的重新格式化,我不知道用css直接进行格式化的方法,但您可以附加一些EventListener并根据更改进行更新。

<ion-item>
    <ion-label [class.is-invalid]="inputsInvalid.type_of_weighin">Type of Weigh In</ion-label>
    <ion-select [(ngModel)]="check_in.type_of_weighin" name="type_of_weighin" interface="action-sheet" required #type_of_weighin="ngModel" (change)="checkValid($event)">
        <ion-option value="standard">Standard</ion-option>
        <ion-option value="LM">Limited Maintenence</ion-option>
        <ion-option value="FM">Full Maintenence</ion-option>
    </ion-select>
</ion-item>

输电系统

inputsInvalid = {};

checkValid(e) {
    const el = e.target;
    inputsInvalid[el.id] = el.classList.contains('ng-invalid');
}

SCS/CSS

ion-label.is-invalid {
    ...
}

希望这是有道理的。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前