Ionic 2：风格离子选择与验证答案

【问题标题】：Ionic 2: Style ion-select with validationIonic 2：风格离子选择与验证
【发布时间】：2017-08-08 22:28:35
【问题描述】：

我正在尝试设置<ion-select> 输入标签的样式，但无法正常工作。似乎 ionic 会自动将 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>

还有其他方法可以设置<label> 的样式吗？

【问题讨论】：

是你要设置样式的action-sheet的标题吗？还是<ion-label>？无论哪种方式，我都无法在任何地方找到<label>-元素。
这是<ion-label> 元素

标签： javascript html css angular ionic-framework

【解决方案1】：

鉴于由 ionic 完成的重新格式化，我不知道直接使用 css 的方法，但您可以附加一些 eventListener 并根据更改进行更新。

HTML

<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');
}

SCSS/CSS

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

希望这是有道理的。

【讨论】：